The data-toggle attributes in Twitter Bootstrap

Question

What does 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, li

Answer 1

It is a Bootstrap defined HTML5 data attribute. It binds a button to an event.

Answer 2

So many answers have been given, but they don't get to the point. Let's fix this.

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

To the point

1. Any attribute starting with data- is not parsed by the HTML5 parser.
2. Bootstrap uses the data-toggle attribute to create collapse functionality.

How to use: Only 2 Steps

1. Add class="collapse" to the element #A you want to collapse.
2. Add data-target="#A" and data-toggle="collapse".

Purpose: the data-toggle attribute allows us to create a control to collapse/expand a div (block) if we use Bootstrap.

Answer 3

The presence of this data-attribute tells Bootstrap to switch between visual or a logical states of another element on user interaction.

It is used to show modals, tab content, tooltips and popover menus as well as setting a pressed-state for a toggle-button. It is used in multiple ways without a clear documentation.

Answer 4

Here you can also find more examples for values that data-toggle can have assigned. Just visit the page and then CTRL+F to search for data-toggle.

Answer 5

It is a Bootstrap data attribute that automatically hooks up the element to the type of widget it is. Data-* is part of the html5 spec, and data-toggle is specific to Bootstrap.

Some Examples:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Go through the Bootstrap JavaScript docs and search for data-toggle and you will see it used in the code examples.

One working example:

<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>

Answer 6

Bootstrap leverages HTML5 standards in order to access DOM element attributes easily within javascript.

data-*

Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.

Reference