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

<script src="../../js/aria-tabs.js"></script>

<div class="container-margin">

    <!-- Tab links -->
    <div class="tab-interface">
        <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>
    </div>

    <!-- 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>
<script src="{{ path '/js/aria-tabs.js' }}"></script>

<div class="container-margin">

<!-- Tab links -->
  <div class="tab-interface">
    <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>
  </div>

<!-- 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. */