Issue
I am currently working on the HTML and CSS part of the website The question is that when I click the Classic and Premium and Fresh part I must hide all other For example, if I click classic then premium and fresh are hidden and vice versa for all other. I was able to show classic when I click. However, problem is that the space are not filling I will post the code and the picture of the case
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Menu or Content Type</title>
<style>
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container" id="top">
<h1>${fn:toUpperCase(content)}</h1>
<hr>
<c:choose>
<c:when test="${content == 'menu'}">
<h3>
<span onclick="showAll('all')">Show All</span> | <span onclick="showCategory('c', 'pr', 'fr')">Classic</span> |
<span onclick="showCategory('pr', 'c', 'fr')">Premium</span> | <span onclick="showCategory('fr', 'c', 'pr')"> Fresh</span>
</h3>
</c:when>
<c:otherwise>
<h2>Fast-Sub</h2>
</c:otherwise>
</c:choose>
</div>
<div class="container" id="middle">
<!-- Meat Board -->
<div class="row mt-5 mb-5">
<c:forEach items="${mList}" var="mList" varStatus="status">
<div class="col-lg-4 mb-4">
<div class="card-horder">
<div class="card ${mList.category}">
<img src="images/tuna.png" class="card-img-top" height="250px">
<div class="card-body">
<p class="card-text">${mList.meat} ${mList.category}</p>
</div>
<br><br>
</div>
</div>
</div>
</c:forEach>
</div>
<!-- Meat Board End -->
</div>
<script>
function display(menuCard){
for (var i = 0; i < menuCard.length; i++){
menuCard[i].style.display = "block";
}
}
function hide(menuCard){
for (var i = 0; i < menuCard.length; i++){
menuCard[i].style.display = "none";
}
}
function showAll(category){
var cardC = document.getElementsByClassName("card c");
var cardPr = document.getElementsByClassName("card pr");
var cardFr = document.getElementsByClassName("card fr");
var arrCard = [cardC, cardPr, cardFr];
for(var i = 0; i < 3; i++){
display(arrCard[i]);
}
}
function showCategory(category, otherC1, otherC2){
var menuCard = document.getElementsByClassName("card "+category);
var other = document.getElementsByClassName("card "+otherC1);
var other2 = document.getElementsByClassName("card "+otherC2);
display(menuCard);
hide(other);
hide(other2);
}
</script>
</body>
</html>
and when I click Fresh
space are not filling up
Solution
You are hiding div with class card. You need to hide div with class "col-lg-4" for filling up space.
Answered By - zainhassan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.