---

Search posts under Bootstrap:

---

Toggle Dropdown in Bootstrap

How to create toggle dropdown with button in Bootstrap?

Dropdown with toggle 

We can create dropdown using toggle 

<div class="container">
  <h2>Dropdown Example</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">SN ITFunda
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">DotNetFunda</a></li>
      <li><a href="#">TechFunda</a></li>
      <li><a href="#">ITFunda</a></li>
      <li class="divider"></li>
      <li><a href="#">KidsFunda</a></li>    
    </ul>
  </div><br>
</div>
<script>
    $(document).ready(function () {
        $(".dropdown-toggle").dropdown("toggle");
    })
</script>

• In the above code snippet we have defined the dropdown, we have created button with class value dropdown-toggle and data-toggle as dropdown
• In the next line we have <ul> elements with class value as dropdown-menu to define the list values 
• In the script function we have $(".dropdown-toggle").dropdown("toggle");- dropdown-toggle calls the body function to dropdown value