How to open Bootstrap dropdown programmatically

Question

I'm trying to open a Bootstrap dropdown when I click a item of another dropdown.

The idea is to select a city from the first drop down - then the script will auto open the second dropdown with areas (and show only areas corresponding to the chosen city).

Here is my JS:

$('#sidebar_filter_city li').click(function(){        $('#sidebar_filter_areas').dropdown('toggle'); }); 

and this is the HTML:

<div class="dropdown form-control">    <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>               <input type="hidden" name="advanced_city" value="jersey-city">    <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">       <li role="presentation" data-value="">All Cities</li>       <li role="presentation" data-value="jersey-city">Jersey City</li>       <li role="presentation" data-value="london">London</li>       <li role="presentation" data-value="new-york">New York</li>    </ul>            </div> </div>  <div class="dropdown form-control">     <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>                    <input type="hidden" name="advanced_area" value="">            <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">                <li role="presentation" data-value="">All Areas</li>                <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>                <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>                <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>                <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>                    .....            </ul>                 </div>     </div> 

Answer 1

The best way is to check if the dropdown is not already open, and then to use .dropdown('toggle').

Couple things to be aware of:

• If you want to trigger it by clicking on another element, you must kill the click event on the other element- otherwise Bootstrap will treat it as a click outside of the dropdown and immediately close it.
• $('.dropdown').addClass('open') is not a good replacement for $('.dropdown-toggle').dropdown('toggle') as suggested in other answers, because it will cause the dropdown to stay permanently open instead of closing when you click off of the component.

HTML:

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br> <div class="dropdown">   <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown   </button>   <div class="dropdown-menu">   Stuff...   </div> </div> 

JS:

$('.trigger_button').click(function(e){   // Kill click event:   e.stopPropagation();   // Toggle dropdown if not already visible:   if ($('.dropdown').find('.dropdown-menu').is(":hidden")){     $('.dropdown-toggle').dropdown('toggle');   } }); 

Fiddle example

Answer 2

For Bootstrap 3 you can just add the 'open' class to the dropdown tag. Removing it closes the dropdown.

$('.dropdown').addClass('open'); // Opens the dropdown $('.dropdown').removeClass('open'); // Closes it 

This may work in other versions, but I'm not sure.