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 ContentBlock">
    <ul class="TabHeadings">
        <li class="TabHeading" rel="tab1">
            <h2>
                <span>
                        Tab one
                    </span>
            </h2>
        </li>
        <li class="TabHeading" rel="tab2">
            <h2>
                <span>
                        Tab two
                    </span>
            </h2>
        </li>
        <li class="TabHeading" rel="tab3">
            <h2>
                <span>
                        Tab three
                    </span>
            </h2>
        </li>
        <li class="TabHeading" rel="tab4">
            <h2>
                <span>
                        Tab four
                    </span>
            </h2>
        </li>
        <li class="TabHeading" rel="tab5">
            <h2>
                <span>
                        Tab five
                    </span>
            </h2>
        </li>
    </ul>

    <div class="TabContainer">
        <h2 class="TabDrawerHeading" rel="tab1">
            Tab one
        </h2>
        <div id="tab1" class="TabContent">
            Lorem ipsum dolor sit amet consectetur.
        </div>
        <h2 class="TabDrawerHeading" rel="tab2">
            Tab two
        </h2>
        <div id="tab2" class="TabContent">
            Lorem ipsum dolor sit amet consectetur.
        </div>
        <h2 class="TabDrawerHeading" rel="tab3">
            Tab three
        </h2>
        <div id="tab3" class="TabContent">
            Lorem ipsum dolor sit amet consectetur.
        </div>
        <h2 class="TabDrawerHeading" rel="tab4">
            Tab four
        </h2>
        <div id="tab4" class="TabContent">
            Lorem ipsum dolor sit amet consectetur.
        </div>
        <h2 class="TabDrawerHeading" rel="tab5">
            Tab five
        </h2>
        <div id="tab5" class="TabContent">
            Lorem ipsum dolor sit amet consectetur.
        </div>
    </div>
</article>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')
</script>
<script type="text/javascript">
    missouristate.requireScript("../../scripts/webpress/tabbed/tabbed.js", false);
</script>
<article class="Tabs ContentBlock">
    <ul class="TabHeadings">
        {{#if title1}}
            <li class="TabHeading" rel="tab1">
                <h2>
                    <span>
                        {{title1}}
                    </span>
                </h2>
            </li>
        {{/if}}
        {{#if title2}}
            <li class="TabHeading" rel="tab2">
                <h2>
                    <span>
                        {{title2}}
                    </span>
                </h2>
            </li>
        {{/if}}
        {{#if title3}}
            <li class="TabHeading" rel="tab3">
                <h2>
                    <span>
                        {{title3}}
                    </span>
                </h2>
            </li>
        {{/if}}
        {{#if title4}}
            <li class="TabHeading" rel="tab4">
                <h2>
                    <span>
                        {{title4}}
                    </span>
                </h2>
            </li>
        {{/if}}
        {{#if title5}}
            <li class="TabHeading" rel="tab5">
                <h2>
                    <span>
                        {{title5}}
                    </span>
                </h2>
            </li>
        {{/if}}
    </ul>

    <div class="TabContainer">
        {{#if title1}}
            <h2 class="TabDrawerHeading" rel="tab1">
                {{title1}}
            </h2>
        {{/if}}
        {{#if tabbedContent1}}
            <div id="tab1" class="TabContent">
                {{tabbedContent1}}
            </div>
        {{/if}}
        {{#if title2}}
            <h2 class="TabDrawerHeading" rel="tab2">
                {{title2}}
            </h2>
        {{/if}}
        {{#if tabbedContent2}}
            <div id="tab2" class="TabContent">
                {{tabbedContent2}}
            </div>
        {{/if}}
        {{#if title3}}
            <h2 class="TabDrawerHeading" rel="tab3">
                {{title3}}
            </h2>
        {{/if}}
        {{#if tabbedContent3}}
            <div id="tab3" class="TabContent">
                {{tabbedContent3}}
            </div>
        {{/if}}
        {{#if title4}}
            <h2 class="TabDrawerHeading" rel="tab4">
                {{title4}}
            </h2>
        {{/if}}
        {{#if tabbedContent4}}
            <div id="tab4" class="TabContent">
                {{tabbedContent4}}
            </div>
        {{/if}}
        {{#if title5}}
            <h2 class="TabDrawerHeading" rel="tab5">
                {{title5}}
            </h2>
        {{/if}}
        {{#if tabbedContent5}}
            <div id="tab5" class="TabContent">
                {{tabbedContent5}}
            </div>
        {{/if}}
    </div>
</article>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
<script type="text/javascript"> missouristate.requireScript("{{path '/scripts/webpress/tabbed/tabbed.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?"
    }
  ],
  "title1": "Tab one",
  "title2": "Tab two",
  "title3": "Tab three",
  "title4": "Tab four",
  "title5": "Tab five",
  "tabbedContent1": "Lorem ipsum dolor sit amet consectetur.",
  "tabbedContent2": "Lorem ipsum dolor sit amet consectetur.",
  "tabbedContent3": "Lorem ipsum dolor sit amet consectetur.",
  "tabbedContent4": "Lorem ipsum dolor sit amet consectetur.",
  "tabbedContent5": "Lorem ipsum dolor sit amet consectetur."
}