Tabs

Tabs

Tabs manage peer groups of content within one parent category. They create shorter pages, and give users the ability to view (and load) only the content group they need. Each tab button has a corresponding content section.

Tabs are currently in use on national data pages for revenue tables.

How to use

The tabs with their panels live in a .tab-interface container.

Note the role attributes in the elements. You should have a tablist, presentation for lis, tab for the tab a tags, and tabpanel for the tab content containers.

For the initial state, the first tab should have the aria-selected="true" attribute. All inactive tab panels should be initialized with aria-hidden="true".

<div class="tab-interface">
    <!-- Tab links -->
    <ul class="eiti-tabs info-tabs" role="tablist">
        <li role="presentation"><a href="#first" tabindex="0" role="tab" aria-controls="first" aria-selected="true">Tab 1</a></li>
        <li role="presentation"><a href="#second" tabindex="-1" role="tab" aria-controls="second" class="link-charlie">Tab 2</a></li>
        <li role="presentation"><a href="#third" tabindex="-2" role="tab" aria-controls="third" class="link-charlie">Tab 3</a></li>
    </ul>

    <!-- Tab content -->
    <div class="eiti-tab-panel" id="first" role="tabpanel">
        <h2>Content in first tab</h2>
    </div>

    <div class="eiti-tab-panel" id="second" role="tabpanel" aria-hidden="true">
        <h2>Content in second tab</h2>
    </div>

    <div class="eiti-tab-panel" id="third" role="tabpanel" aria-hidden="true">
        <h2>Content in third tab</h2>
    </div>
</div>
<div class="tab-interface">
  <!-- Tab links -->
  <ul class="eiti-tabs info-tabs" role="tablist">
    <li role="presentation"><a href="#first" tabindex="0" role="tab" aria-controls="first" aria-selected="true">Tab 1</a></li>
    <li role="presentation"><a href="#second" tabindex="-1" role="tab" aria-controls="second" class="link-charlie">Tab 2</a></li>
    <li role="presentation"><a href="#third" tabindex="-2" role="tab" aria-controls="third" class="link-charlie">Tab 3</a></li>
  </ul>

  <!-- Tab content -->
  <div class="eiti-tab-panel" id="first" role="tabpanel">
    <h2>Content in first tab</h2>
  </div>

  <div class="eiti-tab-panel" id="second" role="tabpanel" aria-hidden="true">
    <h2>Content in second tab</h2>
  </div>

  <div class="eiti-tab-panel" id="third" role="tabpanel" aria-hidden="true">
    <h2>Content in third tab</h2>
  </div>
</div>
/* No context defined for this component. */