Tabs

Tabs are a familiar and convenient way to display groups of related information where only one tab is active and shown while the other tabs are hidden or obscured until the user clicks or touches the tab trigger to reveal it.

The Delta Design System uses an unordered list to create a block of tab triggers using buttons. The tab content is nested inside a .panels component.

Tab 1

The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.

Code Structure

html

<div class="tabs">
  <div role="tablist" aria-multiselectable="false">
    <ul>
      <li class="tab-item" role="presentation">
        <button class="tab-trigger is-active" id="tab-label-1" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab 1</button>
      </li>
      <li class="tab-item" role="presentation">
        <button class="tab-trigger" id="tab-label-2" role="tab" aria-controls="tab-panel-2" aria-selected="false">Tab 2</button>
      </li>
      <li class="tab-item" role="presentation">
        <button class="tab-trigger" id="tab-label-3" role="tab" aria-controls="tab-panel-3" aria-selected="false">Tab 3</button>
      </li>
    </ul>
  </div>
  <div class="panels">
    <div class="panel is-current" id="tab-panel-1" role="tabpanel" aria-labelledby="tab-label-1" aria-hidden="false">
      <h3>Tab 1</h3>
      <p>The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.</p>
    </div>
    <div class="panel" id="tab-panel-2" role="tabpanel" aria-labelledby="tab-label-2" aria-hidden="true">
      <h3>Tab 2</h3>
      <p>Never limit yourself because of others’ limited imagination; never limit others because of your own limited imagination.</p>
    </div>
    <div class="panel" id="tab-panel-3" role="tabpanel" aria-labelledby="tab-label-3" aria-hidden="true">
      <h3>Tab 3</h3>
      <p>After Apollo 17, America stopped looking towards the next horizon. The United States had become a space-faring nation, but threw it away. We have sacrificed space exploration for space exploitation, which is interesting but scarcely visionary.</p>
    </div>
  </div>
</div>

script

$('li.tab-item button#tab-label-1').click(function() {
  $('li.tab-item button.is-active').removeClass('is-active').attr('aria-selected', false);
  $('li.tab-item button#tab-label-1').addClass('is-active').attr('aria-selected', true);
  $('.panels .panel.is-current').removeClass('is-current').attr('aria-hidden', true);
  $('.panels .panel#tab-panel-1').addClass('is-current').attr('aria-hidden', false);
});
$('li.tab-item button#tab-label-2').click(function() {
  $('li.tab-item button.is-active').removeClass('is-active').attr('aria-selected', false);
  $('li.tab-item button#tab-label-2').addClass('is-active').attr('aria-selected', true);
  $('.panels .panel.is-current').removeClass('is-current').attr('aria-hidden', true);
  $('.panels .panel#tab-panel-2').addClass('is-current').attr('aria-hidden', false);
});
$('li.tab-item button#tab-label-3').click(function() {
  $('li.tab-item button.is-active').removeClass('is-active').attr('aria-selected', false);
  $('li.tab-item button#tab-label-3').addClass('is-active').attr('aria-selected', true);
  $('.panels .panel.is-current').removeClass('is-current').attr('aria-hidden', true);
  $('.panels .panel#tab-panel-3').addClass('is-current').attr('aria-hidden', false);
});