Skip to content
Advertisement

Bootstrap navbar dropdown table without dropdown

enter image description hereHow do you create the bootstrap dropdown without the actual button? I want to use this feature somewhere else.

Without bootstrap (from http://www.w3schools.com/tags/tag_select.asp):

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

I want what you get when you click on the button, but not the button. Bootstrap styling would be a plus.

image from: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

Advertisement

Answer

You basically want to trigger the dropdown without manually having to click on it. So you need to make use of window.onload in javascript to trigger the dropdown on page load.

I have also taken the liberty to use the Bootstrap dropdown as you wanted.

HTML 

  <div class="dropdown">
    <!-- the id is important here -->
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

JavaScript

window.onload = function () { 
    $("#dropdown").dropdown('toggle')
};

Updated Codepen here

Advertisement