Tabs

Base

The default tab style places tabbed content under horizontal tabs. The .joy-tabs class should be applied to the element which containes the tab list and tab panels. The <ul> element should have the .joy-tabs__nav class.

Item 1 content

Item 2 content

Item 3 content

<div class="joy-tabs">
  <ul class="joy-tabs__nav" role="tablist">
    <li class="joy-tabs__item joy-text-heading--label joy-active" title="" role="presentation">
      <a href="#" role="tab" tabindex="0" aria-selected="true">Item One</a>
    </li>
    <li class="joy-tabs__item joy-text-heading--label" title="" role="presentation">
      <a href="#" role="tab" tabindex="-1" aria-selected="false">Item Two</a>
    </li>
    <li class="joy-tabs__item joy-text-heading--label" title="" role="presentation">
      <a href="#" role="tab" tabindex="-1" aria-selected="false">Item Three</a>
    </li>
  </ul>
  <div class="joy-tabs__content joy-show">
    <h2>Item 1 content</h2>
  </div>
  <div class="joy-tabs__content joy-hide">
    <h2>Item 2 content</h2>
  </div>
  <div class="joy-tabs__content joy-hide">
    <h2>Item 3 content</h2>
  </div>
</div>

Scoped

Scoped tabs will visually contain the tab content with a border.The .joy-tabs--scoped class should be applied to the element which containes the tab list and tab panels. The <ul> element should have the .joy-tabs--scoped__nav class.

Item One Content

Item Two Content

Item Three Content

<div class="joy-tabs--scoped">
  <ul class="joy-tabs--scoped__nav" role="tablist">
    <li class="joy-tabs__item joy-text-heading--label joy-active" title="Item One" role="presentation"><a href="#" role="tab" tabindex="0" aria-selected="true">Item One</a></li>
    <li class="joy-tabs__item joy-text-heading--label" title="Item Two" role="presentation"><a href="#" role="tab" tabindex="-1" aria-selected="false">Item Two</a></li>
    <li class="joy-tabs__item joy-text-heading--label" title="Item Three" role="presentation"><a href="#" role="tab" tabindex="-1" aria-selected="false">Item Three</a></li>
  </ul>
  <div class="joy-tabs__content joy-show" role="tabpanel">
    <h2>Item One Content</h2>
  </div>
  <div class="joy-tabs__content joy-hide" role="tabpanel">
    <h2>Item Two Content</h2>
  </div>
  <div class="joy-tabs__content joy-hide" role="tabpanel">
    <h2>Item Three Content</h2>
  </div>
</div>

Joystick jQuery Plugin

The following documentation requires the Joystick jQuery plugin. Check out the repo for install instructions.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

You can activate individual tabs in several ways:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Markup

You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" to a anchor tag. The anchor tag must have the href attribute set to the id of the tab content to display.

<div class="joy-tabs">
    <ul class="joy-tabs__nav" role="tablist">
      <li class="joy-tabs__item joy-text-heading--label joy-active" title="" role="presentation">
        <a href="#simpleTab1" role="tab" tabindex="0" data-toggle="tab" aria-selected="true">Item One</a>
      </li>
      <li class="joy-tabs__item joy-text-heading--label" title="" role="presentation">
        <a href="#simpleTab2" role="tab" tabindex="-1" data-toggle="tab" aria-selected="false">Item Two</a>
      </li>
      <li class="joy-tabs__item joy-text-heading--label" title="" role="presentation">
        <a href="#simpleTab3" role="tab" tabindex="-1" data-toggle="tab" aria-selected="false">Item Three</a>
      </li>
    </ul>
    <div class="joy-tabs__content joy-show" id="simpleTab1">
      <h2>Item 1 content</h2>
    </div>
    <div class="joy-tabs__content joy-hide" id="simpleTab2">
      <h2>Item 2 content</h2>
    </div>
    <div class="joy-tabs__content joy-hide" id="simpleTab3">
      <h2>Item 3 content</h2>
    </div>
</div>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM. In the above examples, the tabs are the <a>s with data-toggle="tab" attributes.

.tab('show')

Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.joy.tab event occurs).

$('#someTab').tab('show')

Events

When showing a new tab, the events fire in the following order:

hide.joy.tab (on the current active tab)
show.joy.tab (on the to-be-shown tab)
hidden.joy.tab (on the previous active tab, the same one as for the hide.joy.tab event)
shown.joy.tab (on the newly-active just-shown tab, the same one as for the show.joy.tab event)

If no tab was already active, then the hide.joy.tab and hidden.joy.tab events will not be fired.

Event Type	Description
show.joy.tab	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown.joy.tab	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
hide.joy.tab	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.joy.tab	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

$('a[data-toggle="tab"]').on('shown.joy.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tabs keep related content in a single container so that it can be shown with navigation.