Tabs

Tabs allow local content to be organized in groups of content blocks, with only one visible at a time, each with toggleable visibility by a corresponding button in a list.

• Tabs component
• Tabs styling
• Usage
  • Via javascript
  • Javascript methods
  • Javascript events

Tabs component

In order to create a tabbed content component, the following structure is required.

• A parent container with the class tabs is required to define the component.
• An element with class tab-buttons contains the a button group component with action buttons that toggle tab visibility.
• A block element with class tabs-content contains the tabs.
• Interchangeable local content is stored within tabs.
• Initially all tabs are hidden, so in order for the component to be initialized properly, one tab along with its button counterpart have to be set as active, simply by applying a class active on both the tab and the button.

Code output

HTML Markup

Copy<div class="tabs">
  <div class="tab-buttons">
    <div class="btn-group">
      <a class="btn btn-underlined active" data-toggle="tab" data-href=".tab-1">Tab 1</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href=".tab-2">Tab 2</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href=".tab-3">Tab 3</a>
    </div>
  </div>
  <div class="tabs-content">
    <div class="tab tab-1 active">
      <h3>Tab 1 title</h3>
      <p>This is tab 1 content</p>
    </div>
    <div class="tab tab-2">
      <h3>Tab 2 title</h3>
      <p>This is tab 2 content</p>
    </div>
    <div class="tab tab-3">
      <h3>Tab 3 title</h3>
      <p>This is tab 3 content</p>
    </div>
  </div>
</div>

Tabs styling

The class btn-underlined has been specifically designed for use with tab buttons and its use is encouraged, however, other button styles can also be used. The button group can be responsively styled as described in detail at the button group component section.

It is encouraged for tab buttons to replace standardized <h3> headings when used at the top of a box element to avoid text duplication, as long as the tab buttons use the classes btn-underlined btn-lg. In such cases, a spacer-md element is required to be placed between the tab buttons and tab content to create the necessary spacing, as shown below.

Code output

HTML Markup

Copy<div class="box pad-lg">
  <div class="tabs">
    <div class="tab-buttons">
      <div class="btn-group btn-group-centered btn-group-xxs-stacked">
        <a class="btn btn-underlined btn-lg active" data-toggle="tab" data-href=".tab-4">Customer support</a>
        <a class="btn btn-underlined btn-lg " data-toggle="tab" data-href=".tab-5">Developer support</a>
      </div>
    </div>
    <div class="spacer-md"></div>
    <div class="tabs-content">
      <div class="tab tab-4 active">
        <p class="text-justify">This is some sample content for the customer support tab content. This is some sample content for the customer support tab content. This is some sample content for the customer support tab content.</p>
      </div>
      <div class="tab tab-5">
        <p class="text-justify">This is some sample content for the developer support tab content. This is some sample content for the developer support tab content. This is some sample content for the developer support tab content.</p>
      </div>
    </div>
  </div>
</div>

Usage

Tabs functionality is enabled simply by using the replicating the tabs component markup as shown below.

The data-toggle="tab" attribute is required to enable tab functionlity, while the data-href="target" attribute targets the tab.

HTML Markup

Copy<div class="tabs">
  <div class="tab-buttons">
    <div class="btn-group">
      <a class="btn btn-underlined active" data-toggle="tab" data-href=".tab-1">Tab 1</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href=".tab-2">Tab 2</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href=".tab-3">Tab 3</a>
    </div>
  </div>
  <div class="tabs-content">
    <div class="tab tab-1 active">
      <...>
    </div>
    <div class="tab tab-2">
      <...>
    </div>
    <div class="tab tab-3">
      <...>
    </div>
  </div>
</div>

Via Javascript

Tabs that hold a unique id can be called using Javascript.

Copy$('#id').tab()

Javascript methods

A tab can be displayed using the following method, while at the same time, all sibling tabs are hidden.

Copy$('#id').tab('show')

Javascript events

The tabs component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the tabs component and are linked directly to the tab and not the control triggering elements, like the buttons triggering the tab.

Copy$('#id').on('change.sky.tab', function(e) {
  // Extend function
});

Copy$('#id').on('shown.sky.tab', function(e) {
  // Extend function
});

Copy$('#id').on('hidden.sky.tab', function(e) {
  // Extend function
});