Content tabs that toggle content when clicked.
Install via Bower:
$ bower install websolutions/tabs --save
The most basic example follows this DOM structure:
<div class="tabs">
<ul class="tab-navigation">
<li class="selected">
<a href="#tab1">Tab Title 1</a>
</li>
<li>
<a href="#tab2">Tab Title 2</a>
</li>
</ul>
<div class="tab-container">
<div id="tab1">
<h3>Tab Title 1</h3>
<p>Tab Content 1</p>
</div>
<div id="tab2" class="hidden">
<h3>Tab Title 2</h3>
<p>Tab Content 2</p>
</div>
</div>
</div>
And is initialized like so:
$(".tabs").wsol_tabs();
The plugin can also be removed afterwards:
$(".tabs").data("wsol.tabs").destroy();
Or manually changed to a specific tab (index or ID):
$(".tabs").data("wsol.tabs").changeTab(0);
The jQuery plugin supports a number of configuration options:
Option | Type | Description | Default |
---|---|---|---|
navigationLinkSelector |
String | Selector for tab navigation links | > .tab-navigation > li > a |
containerSelector |
String | Selector for tab containers | > .tab-container > div |
selectedClass |
String | Class name to apply to the selected tab link | selected |
hiddenClass |
String | Class name to apply to non-selected tabs | hidden |