Tabbed content blocks allow you to put a variety of content (freeform, slideshows, etc.) in one area with tabs to other content within the same area.

Best practices

  • Use to present parallel options, such as different ways to complete the same task (online, email, print) or different indexes (search book, search journals)
  • Keep the primary option in the first tab section.
  • Avoid using for sequential tasks as order is not enforced: use ordered lists instead.
  • Avoid using to save space as it hides content from the website visitor and may diminish search ranking. Use headings and text within a rich text block or individual web pages instead.
<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">
            <p>
                Alpha lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi animi dolore modi. Optio facere aspernatur neque fugit perferendis similique voluptatibus!
            </p>
        </div>
        <div class="panel" role="tabpanel" tabindex="0" id="panel-2" aria-labelledby="tab-2">
            <p>
                Beta lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?
            </p>
        </div>
        <div class="panel" role="tabpanel" tabindex="0" id="panel-3" aria-labelledby="tab-3">
            <p>
                Gamma lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam rem quae quia delectus cumque explicabo expedita dignissimos laboriosam iusto tempore?
            </p>
        </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}}">
            <p>
                {{content}}
            </p>
        </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?"
    }
  ]
}