The data-toggle attributes in Twitter Bootstrap

Question

What do data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API.

I have seen a similar question before as well, link. But it didn't help me much.

Answer 1

It is nothing but a HTML5 data attribute that automatically hooks up the element to the type of widget it is. As for example:

data-toggle="modal"

data-toggle="collapse"

data-toggle="dropdown"

data-toggle="tab"

You can go through the  JavaScript docs and search for data-toggle and you will see that it will be used in the code examples.

One working example is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">

  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    <li><a href="#">Item</a></li>

  </ul>

</div>