Tabs

Tabs are multiple content sections (panels), accessible one at a time using control labels.

How to

The Tabs component is used to group related content, and control its visibility using labels - so that only one content panel is visible.

The aria-selected="true" attribute is used to target the selected control.

To connect the control labels to their content panels, make sure the value of the href attribute of the control label matches the id of the associated panel.

<div class="js-tabs">
  <ul class="js-tabs__controls" >
    <li><a href="#panel-1" aria-selected="true">Tab 1</a></li>
    <li><a href="#panel-2">Tab 2</a></li>
    <!-- ... -->
  </ul>

  <div class="js-tabs__panels">
    <section id="panel-1" class="js-tabs__panel">
      <!-- ... -->
    </section>

    <section id="panel-2" class="js-tabs__panel">
      <!-- ... -->
    </section>

    <!-- ... -->
  </div>
</div>

Panel show class #

If you want to add a custom class to the content panel when it is shown (e.g., to animate its entrance), pass a data-show-panel-class attribute to the .js-tab element:

<div class="tabs js-tabs" data-show-panel-class="tabs__panel--is-visible">
  <!-- tabs content here -->
</div>

Panel hide class #

If you want to add a custom class to the content panel when it is hidden (e.g., to animate its exit), pass a data-hide-panel-class attribute to the .js-tab element:

<div class="tabs js-tabs" data-hide-panel-class="tabs__panel--is-hidden">
  <!-- tabs content here -->
</div>

No interaction class #

The .tabs--no-interaction class is automatically added in JS to the component, and then removed when the user interacts with it (i.e., clicking on one of the controls). You can use it to hide the entry/exit panel animations (that you can create using the custom show/hide classes described before) when the page is loading. 

Example:

.tabs--no-interaction .tabs__panel {
  animation-duration: 0s;
  animation-delay: 0s;
}

.tabs__panel--show {
  animation: tabs-panel-entry-anim 0.5s;
}

.tabs__panel--hide {
  animation: tabs-panel-exit-anim 0.5s;
}

Dynamic content #

If your tab component is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the Tab object:

// do this after your content has been added to the page
var tab = document.getElementsByClassName('tab')[0]; // your dynamically created tab
new Tab(tab);

Deep linking #

If you want to be able to share the link to a specific tab panel, you can add the data-deep-link="on" attribute to the .js-tabs element:

<div class="tabs js-tabs" data-deep-link="on">
  <!-- tabs content here -->
</div>

Each time a new tab is selected, the hash of the page is updated with the tab panel id. 

Categories

• Data Display > Tabs

Bug report & feedback

Component Github page ↗