Tabs

Styles

The template includes 3 tabs styles: standard tabs (on top), side tabs and swipe tabs. On smaller screens, all styles fallback to swipe style, to preserve accessibility. All three styles share the same exact markup, except from the style class, and can be nested as deep as needed, even when using different styles.

Here is an example of markup, with various tabs states. Note that the tabs links should use a hashtag matching the id of their respective content block:

<!-- Wrapper, set tabs style class here -->
<div class="standard-tabs">

	<!-- Tabs -->
	<ul class="tabs">
		<li class="active"><a href="#tab-1">Selected tab</a></li>
		<li><a href="#tab-2">Another tab</a></li>
		<li><a href="#tab-3">Another tab</a></li>
		<li class="disabled"><a href="#tab-4">Disabled tab</a></li>
		<li>Non-active</li>
	</ul>

	<!-- Content -->
	<div class="tabs-content">

		<div id="tab-1" class="with-padding">

			Selected tab

		</div>

		<div id="tab-2" class="with-padding">

			Alternate tab

		</div>

		<div id="tab-4" class="with-padding">

			Disabled tab

		</div>

	</div>

</div>

Top tabs

Class: standard-tabs

Add class at-bottom to use bottom tabs:

Side tabs

Class: side-tabs

Add class on-right to use right tabs:

Swipe tabs

Class: swipe-tabs

Height equilizing

In most cases, you would want the tabs to have the same height: just add the class same-height to the wrapper, and the plugin will handle this alone.

<div class="standard-tabs same-height">

Handling tabs

The tabs plugin fires automatically at startup, and refreshes the tabs each time a tab is clicked, so most of the time you should not have to think about it. But in some cases, you may need to change the tabs structure (add or remove a tab) or the content (which may change tabs size): just call this code on the tabs wrapper or on any element inside it:

$(selector).refreshTabs();

This method will refresh the current tab, equalize heights if needed, and also trigger a refresh on wrapping tabs if nested.

If you changed an element containing tabs, you may also use:

$(selector).refreshInnerTabs();

You may also show the tab relative to a specific content-block (call it on the content-block or any element inside it):

$(selector).showTab();

The plugin also provides methods for adding or removing tabs, see reference below.

Tabs events

The plugin will also send some events to help you hook your own functions to the tabs:

$('.tabs-content > div').on('showtabinit', function()
{
	// Called only once per tab, when shown for the first time (includes first tab shown at page load)
});

$('.tabs-content > div').on('showtab', function()
{
	// Called everytime a tab is shown (includes first tab shown at page load)
});

$('.tabs-content > div').on('hidetab', function()
{
	// Called everytime a tab is hidden
});

Note: the hidetab event will always be called before the showtab event

The showtabinit event is useful if you want to load a tab's content only when opened:

$('#tab-1').on('showtabinit', function()
{
	$(this).load('content-url');
});

Methods

$(selector).refreshInnerTabs()

Refresh tabs contained in an element

$(selector).refreshTabs()

Refresh tabs: equalize height, show current tab...

$(selector).addTab(id, title, content, noPadding)

Add a tab

Parameters

@param string id the tab id
@param string title the title of the tab
@param string content the content of the tab
@param boolean noPadding use true to prevent adding padding on the tab content block (optional, default: false)

$(selector).removeTab()

Remove a tab: use it either on the tab or the content block. The tab should be valid for the method to work