The data-toggle attributes in Twitter Bootstrap

Exploring data-toggle

What is data-toggle?

HTML5's exciting summit saw the introduction of custom data attributes to stuff extra information into HTML elements. This information is easily accessible using JavaScript. Bootstrap's version of data-* attributes is customized to jam with the Bootstrap framework and is indeed the bread and butter of the html5 spec, intending to ease the process of project feature implementations.

How does data-toggle generate interactivity?

The data-toggle attribute is a bit of a celebrity. It "connects" HTML elements to interactive widgets such as modals, dropdowns, and tabs in Bootstrap.

• Bless dropdown menus with life using data-toggle="dropdown" without a smidgen of custom JS.
• Modal dialogs become a thing with data-toggle="modal" and data-target doing the heavy lifting.
• Switching content tabs is now a breeze with data-toggle="tab".

Why should I use data-toggle?

Incorporating data-toggle in the Bootstrap framework labors forth benefits galore:

• User-friendly: Boils down the addition of interactive elements on your page to minimum markup.
• Clean code: Reinforces the sanctity of separation between structure (HTML), presentation (CSS), and behavior (JS).
• Flexible: You can stash multiple values within a single attribute to boss around various elements and functionalities.

Can we combine data-toggle with other attributes?

Where data-toggle acts like a superhero, combining it with attributes like data-target is like assembling the Avengers. For example, data-toggle="collapse" synced with class="collapse" makes toggling element visibility feel like a walk in the park.

Going deep with data-toggle

Control sans identifier

In some scenarios, you might want to control a Bootstrap element without an id. This is possible using a sibling selector:

<!-- Only an elder sibling can manage your visibility -->
<button class="btn btn-primary" data-toggle="collapse" data-target=".content">Toggle</button>
<div class="content collapse">First collapsible content.</div>
<div class="content collapse">Second collapsible content.</div>


Extra muscle with JavaScript

Despite data-toggle offering a JavaScript-free solution for element activation, there's always room to optimize its functionality using JS. Perhaps you want to close a dropdown when you click outside of it:

// Not all outside clicks are "unclicks"
document.addEventListener("click", function(event) {
  var isOpen = window.getComputedStyle(document.querySelector('.dropdown-menu')).display === 'block';
  if (isOpen) {
    // We just love clicking, don't we?
    document.querySelector('[data-toggle="dropdown"]').click();
  }
});


Improving Accessibility

Embracing data-toggle in Bootstrap betters web accessibility. It plays along nicely with ARIA attributes. Here's an example:

<!-- Accessible to all, that's the way! -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" aria-expanded="false" aria-controls="myModal">Open Modal</button>


In this case, aria-expanded and aria-controls ensure that assistive technology provides accurate state and relationship of the modal button.