replicating the bootstrap dropdown toggle in jquery

here is a code that can toggle a sub element using the same format as bootstrap.

Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of menu's open at one time. 

$('.dropdown-menu').hide();

HTML

<ul>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="dropdowncode" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Code">Code</a>
  <div class="dropdown-menu" aria-labelledby="dropdowncode" style="">
    
          <a href="/list-category/code/" class="dropdown-item">List Code by Category</a>
          <a href="/list/code/" class="dropdown-item">List Code</a>
          <a href="/list-table/code/" class="dropdown-item">List Table Code</a>
          <a href="/search/code/" class="dropdown-item">Search Code</a>
          
        
    <!-- <a class="dropdown-item" href="#">Action</a> -->
  </div>
</li>
</ul>

CSS

.dropdown-menu {
 display:none;
}

Javascript

$(document).ready(function(){
 $('.dropdown-toggle').on("click", function(e){
    $('.dropdown-menu').hide();
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
    e.preventDefault();
 });
});

Page Views

This page has been viewed 78 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
I'm a big believer in energy and the secret and that sort of thing.
Unknown