How to open Bootstrap dropdown programmatically

Asked
Active3 hr before
Viewed126 times

9 Answers

programmaticallydropdownbootstrap
90%

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.,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.,Find centralized, trusted content and collaborate around the technologies you use most.,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:

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');
   }
});
load more v
88%

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.,Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.,Trigger dropdown menus above elements by adding .dropup to the parent element.,Add .active to items in the dropdown to style them as active.

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>
load more v
72%

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.,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).,I’m trying to open a Bootstrap dropdown when I click a item of another dropdown.

$('#sidebar_filter_city li').click(function() {
   $('#sidebar_filter_areas').dropdown('toggle');
});
load more v
65%

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.,If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:,The following example adds a dropdown menu for a button in the navigation bar:,For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.

Via data-* Attributes

Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.

data - toggle = "dropdown"
load more v
75%

If you're using Bootstrap Vue's dropdown found here, and you want to programmatically open the dropdown, simply add class="show" when you want the dropdown to be open. The implementation can look something like: ,Conditionally add the class show to the dropdown.,I looked through the Bootstrap Vue docs and could not find out how to do this anywhere! Stackoverflow...nothing except some recommendations using Jquery, which I really didn't want to do. Long story..don't ask.,Well this week I was working on building a feature that involves Bootstrap Vue's dropdown. I built the off click to close the dropdown, did the search thingy I needed to, debounced it, but I COULDN'T OPEN THE DROPDOWN PROGRAMMATICALLY! WHERE ARE THE ANSWERS!!!

<b-dropdown class="dropdown" :class="{ show: isOpen }"> // thanks psimyn
load more v
40%

View Javascript questions,If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

<body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
         <ul class="navbar-nav">
            <li class="nav-item">
               <a class="nav-link" href="#">Home </a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Brands
               </a>
               <div class="dropdown-menu" id="ddlbrands" aria-labelledby="navbarDropdownMenuLink" runat="server">
                  <%--<a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>--%>
               </div>
            </li>
         </ul>
      </div>
   </nav>
   <asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
   </asp:ContentPlaceHolder>

</body>
protected void Page_Load(object sender, EventArgs e) {

   if (!IsPostBack) {
      try {
         using(SqlConnection connect = new SqlConnection(cs)) {
            using(SqlCommand scmd = new SqlCommand("SELECT DISTINCT BrandName FROM Products", connect)) {
               using(SqlDataAdapter da = new SqlDataAdapter(scmd)) {
                  using(DataSet ds = new DataSet()) {
                     connect.Open();
                     da.Fill(ds);
                     ddlbrands.DataSource = ds; // throws error since Datasource is not a property.
                     ddlbrands.DataBind();
                     connect.Close();
                  }
               }
            }
         }
      } catch (Exception ex) {
         Console.WriteLine(ex.Message);
      }
   }
}
load more v
22%

Read the full documentation for more information about using GitHub Pages. , The site configured at this address does not contain the requested file. , If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file.

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.

http: //example.com/
load more v
60%

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).,The best way is to check if the dropdown is not already open, and then to use .dropdown('toggle'). ,This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus

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>
load more v
48%

Handler for click events to close the dropdown,This property reflects the state of the dropdown, whether it is open or closed.,Components.DropdownButton,Then in your controller or component, optionally close the dropdown:

  • toggleDropdown
  • openDropdown
  • closeDropdown
<BsDropdown as |dd|>
   <dd.toggle>Dropdown <span class="caret"></span></dd.toggle>
   <dd.menu as |ddm|>
      <ddm.item>
         <ddm.linkTo @route="index">Something</ddm.linkTo>
      </ddm.item>
      <ddm.item>
         <ddm.linkTo @route="index">Something different</ddm.linkTo>
      </ddm.item>
   </dd.menu>
</BsDropdown>
load more v

Other "programmatically-dropdown" queries related to "How to open Bootstrap dropdown programmatically"