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>

Yarin · Accepted Answer · 2017-03-08T18:30:45.353

55

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

edited Mar 08 '17 at 18:30

answered Mar 02 '16 at 23:08

Yarin

159,198
144
384
498

1

This is the only answer that works for me in Twitter Bootstrap 4.0.0-beta.3 – Alex Bitek Jan 07 '18 at 21:59
Why didn't it occur to me?! (***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***) – Fr0zenFyr Jan 23 '18 at 10:26
1

You also should toggle aria-expanded attribute. – jcubic May 28 '18 at 10:37
About "_it will cause the dropdown to stay permanently open instead of closing when you click off of the component._". No, it doesn't. It closes the dropdown as soon as I click on any other element. – Daniyal Nasir Aug 24 '18 at 18:00

score 22 · Answer 2 · answered Apr 11 '15 at 00:27

22

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.

answered Apr 11 '15 at 00:27

mkandefer

269
2
9

This works in Bootstrap 4. I was puzzled until I realised you have to add it to the 'dropdown-menu'
. In native JS: document.getElementsByClassName('.dropdown-menu')[0].classList.add('show')
– Martin CR Mar 16 '21 at 17:02

Eugene · Answer 3 · 2014-05-26T10:33:48.750

19

Bootstrap's dropdown plugin waits for 'click.bs.dropdown' event to show the menu, so in this case:

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

should work. This will not trigger other 'click' events on same element if any.

edited May 26 '14 at 10:33

answered May 26 '14 at 10:27

Eugene

3,200
19
16

Works for me; be sure to call `trigger` on the element with `data-toggle="dropdown"`. Unlike `addClass('open')`, this also closes the dropdown when you click away. – Dunc Sep 13 '16 at 10:44
I'm using Bootstrap 3.3.6, and it's 'click.bs.dropdown.data-api' – kevinpo May 19 '17 at 13:15
Super Working Fine – Thulasiram Nov 10 '20 at 14:11
Saved Me More Time for Other Tooltip Issue also. Same logic with Different event – Thulasiram Nov 10 '20 at 15:08

score 8 · Answer 4 · edited Feb 16 '16 at 10:03

8

dropdown('toggle') works great for me when using the button tag.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>

edited Feb 16 '16 at 10:03

Marcos Pérez Gude

21,096
4
36
67

answered Dec 16 '15 at 00:08

mendydo

89
1
2

But I do have a question. I am getting an error: Uncaught TypeError: "#button".dropdown is not a function : in the javascript console. Is this normal? – JoCoaker Jun 10 '16 at 12:52
open and toggle are different things. toggle might close the dropdown if it's already open – TomSawyer Jun 09 '20 at 13:08

score 7 · Answer 5 · answered Apr 12 '16 at 17:12

You need to stop the click event from bubbling to parent elements

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

You can also use return false; which will do the same thing, but this will also preventDefault on the click.

score 5 · Answer 6 · answered Apr 04 '16 at 03:39

If absolutely none of them are doing the trick, then you can do something like the following:

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

Although the above will work, I do not recommend using it as it's a bit hacky.

score 4 · Answer 7 · answered Apr 18 '18 at 17:32

4

Something I like to use that has a bit more user-expected behavior:

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

If it is already open, don't do anything. If it is closed, then it should open.

answered Apr 18 '18 at 17:32

Reed

1,305
17
32

score 3 · Answer 8 · answered Jun 18 '17 at 05:19

This works for me.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

Markup:

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

score 3 · Answer 9 · answered Oct 05 '17 at 08:37

3

just use .click() on data-toggle element but do not forget e.stopPropagation()

these one simple line took me for hours, hope it's help :)

answered Oct 05 '17 at 08:37

Peace Saravudecha

31
1

score 2 · Answer 10 · answered Jul 13 '17 at 21:27

If you inspect opened drop down menu you can see selector which changes display of Dropdown menu. In bootstrap v3.0.0 css selector is:

.open > .dropdown-menu {
    display: block;
}

So open class should be added to parent node of element with .dropdown-menu class. In other versions if it has been changed probably correct selector can be found in the same way.

score 2 · Answer 11 · edited Apr 19 '20 at 20:38

2

Try this:

$('#sidebar_filter_areas').click();

edited Apr 19 '20 at 20:38

Paolo

17,649
21
81
115

answered Jul 27 '17 at 20:08

Wellington Gasparin

31
3

score 2 · Answer 12 · answered Oct 27 '17 at 14:48

2

According to bootstrap docs you can simply use this :

$('.dropdown-toggle').dropdown();

answered Oct 27 '17 at 14:48

MajiD

2,191
1
22
30

score 2 · Answer 13 · answered Jul 11 '18 at 10:54

For Bootstrap 4 using Anuglar 6 i used this:

<div class="dropdown-menu" id='logoutDropDownMenu' x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">

My component ts file has this function

 import { DOCUMENT } from '@angular/common';
 import { Inject } from '@angular/core';

export class HomeComponent implements OnInit {

  private toggleLogout: boolean;

  constructor(@Inject(DOCUMENT) private document: any){}


 toggleButton() {
    if (this.toggleLogout) {
      this.document.getElementById('logoutDropDownMenu').classList.add('show');
    } else {
      this.document.getElementById('logoutDropDownMenu').classList.remove('show');
    }
    this.toggleLogout = !this.toggleLogout;

  }

score 1 · Answer 14 · answered Jun 17 '18 at 12:03

in Bootstrap 4.x, following components need to be effected:

li > .nav-item .dropdown
- a > .nav-link > aria-expanded
div > .dropdown-menu

Adding a click event listener, which triggers toggling a class and a bool value, for those classes make dropdown work with pure javascript as follows:

let status = false
const nav = document.getElementsByClassName('nav-item dropdown')[0]
nav.addEventListener('click', toggleDropdown)
function toggleDropdown () {
   if (status) {
      nav.classList.add('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.add('show')
   } else {
      nav.classList.remove('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.remove('show')
   }
   return status = !status
}

score 1 · Answer 15 · answered Aug 27 '18 at 06:52

1

You can achieve the same thing using Native JavaScript like this:

 document.getElementById('XYZ').click('open');

It works on all browsers.

answered Aug 27 '18 at 06:52

Vivek Mehta

644
7
10

score 0 · Answer 16 · answered Jun 14 '17 at 09:32

0

most of the time act as a manual action works :

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

answered Jun 14 '17 at 09:32

nopenope

1

score 0 · Answer 17 · edited Jan 13 '22 at 19:41

0

Add data-toggle="dropdown" id="dropbox" in HTML like this:

<div data-toggle="dropdown" id="dropbox"

And in JS/TS:

$('#dropbox').trigger('click.bs.dropdown');

edited Jan 13 '22 at 19:41

isherwood

52,576
15
105
143

answered Dec 10 '20 at 08:14

Shashwat Gupta

4,435
36
28

score -1 · Answer 18 · answered Feb 06 '21 at 11:17

If you use a JS framework like AngularJS, you just need to implement your condition in JS (conditionMenuIsOpen()) and bind display styling of dropdown-menu with this condition in HTML. When condition is true, then display styling will change from hidden to block and the dropdown menu will appear.

<ul class="dropdown-menu" ng-style="vm.conditionMenuIsOpen() && {'display':'block'}">
  ...
</ul>

How to open Bootstrap dropdown programmatically

18 Answers18

JS

HTML

Linked