Thompson Rivers University
Thompson Rivers University

Tabbed Content

To add a tabbed interface to the sidebar, add them as you would normally, but add a class of 'widget' to the 'tabs-content' area. When placed in a sidebar, the tabs will automatically change colour appropriately.

Please note: The maximum number of tabs allowed in the sidebar is 3.


<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentation"><a href="#tab-1" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-1">Tab 1</a></li>
<li class="tab-title" role="presentation"><a href="#tab-2" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-2">Tab 2</a></li>
<li class="tab-title" role="presentation"><a href="#tab-3" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-3">Tab 3</a></li>
</ul>
<div class="tabs-content widget">
<section role="tabpanel" aria-hidden="false" class="content active" id="tab-1">
<p>First tab content goes here...</p>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="tab-2">
<p>Second tab content goes here...</p>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="tab-3">
<p>Third tab content goes here...</p>
</section>
</div>