Tab

This plugin is often used with the .nav element, however you are not restricted in terms of what HTML markup you can use.

If you’re interested in automatically generating an interactive tabs section from an existing static list (<ul> or <ol> element), refer to the Tabs plugin.

Usage

Use .tab on each of the elements containing tab content.

Via data attributes

Trigger elements, usually buttons or links, are used to reveal tabbed content on click. You can activate a tab navigation without writing any JavaScript by adding data-toggle="tab" to a trigger element and identifying the tab containing the content using the href (in the case of a link) or data-target attributes.

<ul class="nav" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link is-active" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-content-1" aria-selected="true">Tab 1</a>
    <a class="nav-link" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-content-2" aria-selected="false">Tab 2</a>
  </li>
  ...
</ul>
<div class="tab-content">
  <div class="tab fade is-shown is-active" id="tab-content-1" role="tabpanel">...</div>
  <div class="tab fade" id="tab-content-2" role="tabpanel">...</div>
  ...
</div>

Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The active trigger and tab elements must have .is-active applied.

Use .fade on each .tab to apply a fade transition. The active .tab element must also have .is-shown to make the content visible.

Options

An additional class name to apply to the active trigger element can be specified by using the data-active-class attribute. For example, to apply a class name of .text-primary to apply the data-active-class="text-primary" to the trigger element.

Events

Use event.target to target the tab being shown or hidden.

each('a[data-toggle="tab"]', function(a) {
  a.addEventListener('tab.show', function(e) {
    e.target // newly activated tab
    e.relatedTarget // previous active tab, if any
  });
});