Main Content
Using WC Navigation Tools
WC Tabbed Interface for Clickable Tabs
WC Tabbed Interface can be used to create a tabbed interface like the one below. Click on each tab to learn how...
Step 1: Add the tabbed interface shell.
The tabbed interface shell is simply a
div with the following attributes:
- a unique
idand - the
tabbed-interfaceclass
<div id="uniqueid" class="tabbed-interface">
</div>
</div>
Step 2: For each step, add a tab section.
Each tab of content is simply a
div with the following attributes:
- a unique
id, - the
tab-sectionclass, and - a tab
title
<div id="uniqueid" class="tabbed-interface">
<div id="uniqueid01" class="tab-section"
title="INSERT TITLE HERE">
</div>
</div>
Step 3: Add content to your tab section.
Place your tab content into the tab-section:
<div id="uniqueid" class="tabbed-interface">
<div id="uniqueid01" class="tab-section selected" title="INSERT TITLE HERE">
...INSERT CONTENT HERE...
</div>
</div>
Step 4: Style your tabs.
The tabbed interface has a default grey style, but you can change the collors in you content.css:
/* style the tabs */
.tabs-collection li {
.tabs-collection li.selected {
/* style the tab container */
.tabbed-interface.js-enabled {
.tabs-collection li {
background: #dddddd;}
.tabs-collection li.selected {
background: #efefef;}
/* style the tab container */
.tabbed-interface.js-enabled {
background: #efefef;}