Accordions and Tabs

Accordions and tabs are a great way to organize a lot of content on a single page. You can fill the content area with any sort of content, including a grid.

IMPORTANT: The key to accordion and tab functionality is that the content div has a unique id and that the navigation link is an anchor to that div, i.e. href="#id". Because of the unique IDs for the accordion sections, you can also create an anchor link to a specific dropdown section. For more information, contact ows@g.clemson.edu.

Accordions

HTML

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#panel1a">Accordion 1</a>
        <div id="panel1a" class="content active"><!--Your content goes here--></div>
    </li>
    <li class="accordion-navigation">
        <a href="#panel2a">Accordion 2</a>
        <div id="panel2a" class="content"><!--Your content goes here--></div>
    </li>
    <li class="accordion-navigation">
        <a href="#panel3a">Accordion 3</a>
        <div id="panel3a" class="content"><!--Your content goes here--></div>
    </li>
</ul>

Tabs

HTML

<ul class="tabs horizontal" data-tab>
    <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
    <li class="tab-title"><a href="#panel12">Tab 2</a></li>
    <li class="tab-title"><a href="#panel13">Tab 3</a></li>
    <li class="tab-title"><a href="#panel14">Tab 4</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panel11"><!--Your content goes here--></div>
    <div class="content" id="panel12"><!--Your content goes here--></div>
    <div class="content" id="panel13"><!--Your content goes here--></div>
    <div class="content" id="panel14"><!--Your content goes here--></div>
</div>

For more information, see Style Guide/Accordions and Tabs.