Reputation: 351

Collapse previous div before showing a new div

This is the UI of INGROW page.

1)User first clicks on the list icon. A menu that is actually collapsed will show on the screen.
2)Now, The user will select a category.
3)And according to user choice, A div that is actually collapsed will appear and show all the items.
4)But when the user selects Health & Personal Care, Home & Kitchen should collapse.

So my question is how to show only one category at a time. It can happen that the user clicks on all menu options and they will be displayed on the screen but I don't want that. I want to show only one category at one time.

The second problem is that of the logo image. When I am running this in vs code and using live server it's running fine but I'm running it from outside(Just clicking on the .html page) it doesn't show(Internet is there).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online Shopping With INGROSH</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="border" >
        <div class="w-100 h-25 row" >
      <div class="col-5" >
      <button class="btn-icn btn-outline-dark btn-sm ms-2 mt-2 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#menuCollapse" aria-expanded="false" aria-controls="menuCollapse"><span class="material-icons">list</span></button>
      <img src="/img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>
      </div>
      <div class="col-4">
      <input type="search" placeholder="search" class="search-bar mt-1" />
      </div>
      <div class="col-3 text-end">
      <button class="btn-icn btn-outline-dark mt-2 me-3"><span class="material-icons"> shopping_cart </span></button>
      <button class="btn-icn btn-outline-dark btn-sm"><span class="material-icons"> person </span></button>
      </div>
      </div>
    </div>
    <div class="container-fluid border collapse collapsing" id="menuCollapse">
      <div class="row row-cols-3">
        <div class="col border p-0"> <button class="border-0 container-fluid  h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#homeKitchen" aria-expanded="false" aria-controls="homeKitchen">Home & Kitchen</button> </div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#hlthPrsnlCare" aria-expanded="false" aria-controls="hlthPrsnlCare">Health & Personal Care</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Processed Food</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Staples & Grocery</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Beverage & Confectionary</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Dairy, Frozen & Bakery</button></div>
      </div>
    </div>
    <div class="collapse" id="homeKitchen">
       <h1 class="mt-1 text-center h1">Home & Kitchen</h1>
       
    </div>
    <div class="collapse" id="hlthPrsnlCare">
      <h1 class="mt-1 text-center h1">Health & Personal Care</h1>
      
   </div>
   <div class="collapse" id="">
    <h1 class="mt-1 text-center h1"></h1>
    
 </div>
 <div class="collapse" id="">
  <h1 class="mt-1 text-center h1"></h1>
  
</div>
<div class="collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
<div class="collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
  </body>
</html>

Upvotes: 2

Answers (1)

NcXNaV

Reputation: 1751

Simply hide the other on button click. Note that I added another class .item to differentiate it with other .collapse.

$(".btn").click(function(){
    $('.collapse.item').collapse('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online Shopping With INGROSH</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="border" >
        <div class="w-100 h-25 row" >
      <div class="col-5" >
      <button class="btn-icn btn-outline-dark btn-sm ms-2 mt-2 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#menuCollapse" aria-expanded="false" aria-controls="menuCollapse"><span class="material-icons">list</span></button>
      <img src="/img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>
      </div>
      <div class="col-4">
      <input type="search" placeholder="search" class="search-bar mt-1" />
      </div>
      <div class="col-3 text-end">
      <button class="btn-icn btn-outline-dark mt-2 me-3"><span class="material-icons"> shopping_cart </span></button>
      <button class="btn-icn btn-outline-dark btn-sm"><span class="material-icons"> person </span></button>
      </div>
      </div>
    </div>
    <div class="container-fluid border collapse collapsing" id="menuCollapse">
      <div class="row row-cols-3">
        <div class="col border p-0"> <button class="border-0 container-fluid  h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#homeKitchen" aria-expanded="false" aria-controls="homeKitchen">Home & Kitchen</button> </div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#hlthPrsnlCare" aria-expanded="false" aria-controls="hlthPrsnlCare">Health & Personal Care</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Processed Food</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Staples & Grocery</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Beverage & Confectionary</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Dairy, Frozen & Bakery</button></div>
      </div>
    </div>
    <div class="item collapse" id="homeKitchen">
       <h1 class="mt-1 text-center h1">Home & Kitchen</h1>
       
    </div>
    <div class="item collapse" id="hlthPrsnlCare">
      <h1 class="mt-1 text-center h1">Health & Personal Care</h1>
      
   </div>
   <div class="item collapse" id="">
    <h1 class="mt-1 text-center h1"></h1>
    
 </div>
 <div class="item collapse" id="">
  <h1 class="mt-1 text-center h1"></h1>
  
</div>
<div class="item collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
<div class="item collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
  </body>
</html>

Upvotes: 1

Collapse previous div before showing a new div

Answers (1)

Related Questions