Sections

Tab

Create tabbable regions within the page.

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

There are no options exposed for this plugin.

Events

Name Description
tab.show Fires on tab show, but before the new tab has been shown.
tab.shown Fires after the tab has been shown.
tab.hide Fires on tab hide, after the tab has been hidden.
tab.hidden Fires after the tab has been hidden.

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
  });
});