HTML CSS filling the empty space after style:display = none are clicked-CodePudding

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>





<div  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  id="middle">
    <!-- Meat Board -->
        <div >
            <c:forEach items="${mList}" var="mList" varStatus="status">         
                <div >
                <div >
                    <div >
                      <img src="images/tuna.png"  height="250px">
                      <div >
                        <p >${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

CodePudding user response：

You are hiding div with class card. You need to hide div with class "col-lg-4" for filling up space.