Click here to Skip to main content
15,908,776 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi Team

I have dropdownlist and now the problem i dont want it to hide when a user finish selecting subcategories it must still be open and close. Still select from category and subcategory.

What I have tried:

<div class="col-md-6 col-lg-3">
  <h3>Health and Beauty</h3>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="health-beauty-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Select Category
    </button>
    <ul class="dropdown-menu" aria-labelledby="health-beauty-dropdown">
      <li><a class="dropdown-item" href="#" id="skin-care">Skin care</a></li>
      <li><a class="dropdown-item" href="#">Hair care</a></li>
      <li><a class="dropdown-item" href="#">Body care</a></li>
      <li><a class="dropdown-item" href="#">Make up tools</a></li>
      <li><a class="dropdown-item" href="#">Fragrance items</a></li>
      <li><a class="dropdown-item" href="#">Health</a></li>
      <li><a class="dropdown-item" href="#">Face mask</a></li>
      <li><a class="dropdown-item" href="#">Vitamins</a></li>
    </ul>
  </div>
</div>

<div class="col-md-6 col-lg-3" id="skin-care-subcategories" style="display: none;">
  <h3>Skin care</h3>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Cleansers</a>
    <a href="#" class="list-group-item list-group-item-action">Toners</a>
    <a href="#" class="list-group-item list-group-item-action">Moisturizers</a>
    <a href="#" class="list-group-item list-group-item-action">Serums</a>
  </div>
</div>
HTML



// jquery
// skin care subcategories

$(document).ready(function(){
  $("#skin-care").click(function(){
    $("#skin-care-subcategories").toggle();
  });

  $("#health-beauty-dropdown").click(function(){
    $(".dropdown-menu").toggle();
  });
});
JavaScript

Posted
Updated 27-Apr-23 23:34pm

1 solution

not sure what do want but do you mean something like this??

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
 
Share this answer
 
Comments
Gcobani Mkontwana 28-Apr-23 9:38am    
@Rebecca2002 the issue is on the jquery side not on html, it must remain open and be able to close but not just hide when its closed. Its an event handler not html side.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900