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".

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>

Rendered HTML

• Accordion 1
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Accordion 2
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Accordion 3
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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>

Rendered HTML

• Tab 1
• Tab 2
• Tab 3
• Tab 4

To display the tabs along the side instead of along the top, simply replace the horizontal class with vertical.

HTML

<ul class="tabs vertical" data-tab>
    <li class="tab-title active"><a href="#panel21">Tab 1</a></li>
    <li class="tab-title"><a href="#panel22">Tab 2</a></li>
    <li class="tab-title"><a href="#panel23">Tab 3</a></li>
    <li class="tab-title"><a href="#panel24">Tab 4</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panel21"><!--Your content goes here--></div>
    <div class="content" id="panel22"><!--Your content goes here--></div>
    <div class="content" id="panel23"><!--Your content goes here--></div>
    <div class="content" id="panel24"><!--Your content goes here--></div>
</div>

Rendered HTML

• Tab 1
• Tab 2
• Tab 3
• Tab 4