Missouri State University Pattern Library

Tab

There are no notes for this item.

<article class="tabs-edit ContentBlock">
    <div class="tablist" role="tablist" aria-label="Sample tab group">
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-1" id="tab-1">
        Alpha
      </button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
        Beta
      </button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
        Gamma
      </button>
    </div>
    <div class="panels">
        <div class="panel" role="tabpanel" tabindex="0" id="panel-1" aria-labelledby="tab-1">
            <h2 class="tab__panel-headline">Alpha</h2>
            <div class="tab__panel-content">
                Alpha lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi animi dolore modi. Optio facere aspernatur neque fugit perferendis similique voluptatibus!
            </div>
        </div>
        <div class="panel" role="tabpanel" tabindex="0" id="panel-2" aria-labelledby="tab-2">
            <h2 class="tab__panel-headline">Beta</h2>
            <div class="tab__panel-content">
                Beta lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?
            </div>
        </div>
        <div class="panel" role="tabpanel" tabindex="0" id="panel-3" aria-labelledby="tab-3">
            <h2 class="tab__panel-headline">Gamma</h2>
            <div class="tab__panel-content">
                Gamma lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?
            </div>
        </div>
    </div>
</article>
<script type="text/javascript">
    missouristate.requireScript("../../scripts/components/tabs.js", false);
</script>
 
<article class="tabs-edit ContentBlock">
  <div class="tablist" role="tablist" aria-label="{{label}}">
    {{#each tab}}
      <button class="tab" role="tab" aria-selected="false" aria-controls="panel-{{number}}" id="tab-{{number}}">
        {{title}}
      </button>
    {{/each}}
  </div>
  <div class="panels">
    {{#each tab}}
      <div class="panel" role="tabpanel" tabindex="0" id="panel-{{number}}" aria-labelledby="tab-{{number}}">
        <h2 class="tab__panel-headline">{{title}}</h2>
        <div class="tab__panel-content">
          {{content}}
        </div>
      </div>
    {{/each}}
  </div>
</article>
<script type="text/javascript">
  missouristate.requireScript("{{path '/scripts/components/tabs.js'}}", false);

</script>
 
{
  "label": "Sample tab group",
  "tab": [
    {
      "number": 1,
      "title": "Alpha",
      "content": "Alpha lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi animi dolore modi. Optio facere aspernatur neque fugit perferendis similique voluptatibus!"
    },
    {
      "number": 2,
      "title": "Beta",
      "content": "Beta lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?"
    },
    {
      "number": 3,
      "title": "Gamma",
      "content": "Gamma lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?"
    }
  ]
}