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-08 18:30:45Z

64

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 8, 2017 at 18:30

answered Mar 2, 2016 at 23:08

Yarin

186k156 gold badges414 silver badges527 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Bitek Over a year ago

This is the only answer that works for me in Twitter Bootstrap 4.0.0-beta.3

Fr0zenFyr Over a year ago

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)

jcubic Over a year ago

You also should toggle aria-expanded attribute.

Daniyal Nasir Over a year ago

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.

cytek04 Over a year ago

About "it will cause the dropdown to stay permanently open instead of closing when you click off of the component." It shows the menu but Bootstrap thinks it is still closed. If you are listening to the show.bs.dropdown event, it will NOT be fired using this method. I definitely recommend the accepted answer if you need to use the Bootstrap dropdown events.

mkandefer · Accepted Answer · 2015-04-11 00:27:28Z

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, 2015 at 0:27

mkandefer

2692 silver badges9 bronze badges

1 Comment

Martin CR Over a year ago

This works in Bootstrap 4. I was puzzled until I realised you have to add it to the 'dropdown-menu' <div>. In native JS: document.getElementsByClassName('.dropdown-menu')[0].classList.add('show')

Eugene · Accepted Answer · 2014-05-26 10:33:48Z

20

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, 2014 at 10:33

answered May 26, 2014 at 10:27

Eugene

3,37524 silver badges17 bronze badges

4 Comments

Dunc Over a year ago

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.

kevinpo Over a year ago

I'm using Bootstrap 3.3.6, and it's 'click.bs.dropdown.data-api'

Thulasiram Over a year ago

Super Working Fine

Thulasiram Over a year ago

Saved Me More Time for Other Tooltip Issue also. Same logic with Different event

Marcos Pérez Gude · Accepted Answer · 2016-02-16 10:03:17Z

9

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, 2016 at 10:03

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

answered Dec 16, 2015 at 0:08

mendydo

991 silver badge2 bronze badges

2 Comments

JoCoaker Over a year ago

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?

TomSawyer Over a year ago

open and toggle are different things. toggle might close the dropdown if it's already open

Adam Lynch · Accepted Answer · 2016-04-12 17:12:43Z

7

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.

answered Apr 12, 2016 at 17:12

Adam Lynch

3312 silver badges6 bronze badges

Comments

adamj · Accepted Answer · 2016-04-04 03:39:04Z

5

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.

answered Apr 4, 2016 at 3:39

adamj

4,8026 gold badges52 silver badges60 bronze badges

Comments

Reed · Accepted Answer · 2018-04-18 17:32:10Z

5

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, 2018 at 17:32

Reed

1,6932 gold badges25 silver badges44 bronze badges

Comments

LTroya · Accepted Answer · 2017-06-18 05:19:34Z

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>

Peace Saravudecha · Accepted Answer · 2017-10-05 08:37:11Z

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 5, 2017 at 8:37

Peace Saravudecha

311 bronze badge

Comments

Hamed Mahdizadeh · Accepted Answer · 2017-07-13 21:27:38Z

2

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.

answered Jul 13, 2017 at 21:27

Hamed Mahdizadeh

9751 gold badge17 silver badges35 bronze badges

Comments

MajiD · Accepted Answer · 2017-10-27 14:48:11Z

2

According to bootstrap docs you can simply use this :

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

answered Oct 27, 2017 at 14:48

MajiD

2,6151 gold badge26 silver badges35 bronze badges

Comments

Levijatanu · Accepted Answer · 2018-07-11 10:54:08Z

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;

  }

Paolo · Accepted Answer · 2020-04-19 20:38:35Z

2

Try this:

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

edited Apr 19, 2020 at 20:38

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Jul 27, 2017 at 20:08

Wellington Gasparin

313 bronze badges

Comments

cagcak · Accepted Answer · 2018-06-17 12:03:40Z

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
}

Vivek Mehta · Accepted Answer · 2018-08-27 06:52:28Z

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, 2018 at 6:52

Vivek Mehta

7728 silver badges10 bronze badges

Comments

53epo · Accepted Answer · 2023-10-01 10:09:02Z

1

Update for Bootstrap 5.3 ...

According to the docs, you can create a bootstrap.Dropdown object. It has toggle(), show() and hide() methods.

First you need to find the toggling element, which is the HTML element of class="dropdown-menu" e.g.

let tce = new bootstrap.Dropdown(document.getElementById('navbarFileMenu'))

Then you can call tce.toggle() etc.

Note that - as per an earlier answer - you will also need to call stopPropagation() on the triggering event, or else the newly toggled dropdown will immediately disappear.

answered Oct 1, 2023 at 10:09

53epo

9197 silver badges8 bronze badges

Comments

nopenope · Accepted Answer · 2017-06-14 09:32:38Z

0

most of the time act as a manual action works :

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

answered Jun 14, 2017 at 9:32

nopenope

1

Comments

isherwood · Accepted Answer · 2022-01-13 19:41:51Z

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, 2022 at 19:41

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 10, 2020 at 8:14

Shashwat Gupta

5,31845 silver badges33 bronze badges

Comments

Johannes Reiners · Accepted Answer · 2022-08-03 16:15:53Z

0

If you don't want to use jQuery, than the plain JS variant of Dropdown.toggle() is:

# jQuery
$(elementThatTriggersDropdown).dropdown('toggle');

# js 
let dropdown = new Dropdown(elementThatTriggersDropdown);
dropdown.toggle();

Don't forget to import / make Dropdown class of bootstrap available.

https://github.com/twbs/bootstrap/blob/v5.2.0/js/src/dropdown.js

for example:

import Dropdown from "bootstrap/js/src/dropdown";

edited Aug 3, 2022 at 16:15

answered Aug 3, 2022 at 11:25

Johannes Reiners

7087 silver badges13 bronze badges

Comments

Sajjad Aljileezi · Accepted Answer · 2023-02-14 06:36:10Z

0

this is how i do it using jQuery no need to add or remove classes it’s built in bootstrap 4

$(function () {
        $('li.nav-item').hover(function () {
                $(this).children('.dropdown-menu').addClass('show')

            },
            function () {
                $(this).children('.dropdown-menu').removeClass("show");
            });
    });

answered Feb 14, 2023 at 6:36

Sajjad Aljileezi

7948 silver badges10 bronze badges

Comments

Stefanos Kargas · Accepted Answer · 2021-02-06 11:17:48Z

-2

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>

answered Feb 6, 2021 at 11:17

Stefanos Kargas

11.2k23 gold badges81 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to open Bootstrap dropdown programmatically

21 Answers 21

5 Comments

1 Comment

4 Comments

JS

HTML

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

21 Answers 21

5 Comments

1 Comment

4 Comments

JS

HTML

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related