Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

<nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
$(".tabs").tabs();
View All Demos

Using Tabs

Main

tabs.js
tabs.css

Dependencies

jQuery
core.js
mediaquery.js
swap.js

Basic

Tabs will automatically turn a set of links into a tabbed interface. The link's href attribute should point to the desired content's fragment identifier, white the data-tabs-group attribute should remain consistent between linked tabs:

$(".tab").tabs();
<div role="tablist">
    <nav>
        <a href="#tab-one" class="tab" data-tabs-group="tab-group">One</a>
        <a href="#tab-two" class="tab" data-tabs-group="tab-group">Two</a>
        <a href="#tab-three" class="tab" data-tabs-group="tab-group">Three</a>
    </nav>
    <div id="tab-one">
        ...
    </div>
    <div id="tab-two">
        ...
    </div>
    <div id="tab-three">
        ...
    </div>
</div>

Accessibility

The role="tablist" attribute should be set on a common parent of both the tabs and tab targets to ensure accessibility support.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-tabs-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
customClass string '' Class applied to instance
maxWidth string Infinity Width at which to auto-disable plugin
mobileMaxWidth string '740px' Width at which to auto-disable mobile styles
theme string "fs-light" Theme class name

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
update.tabs Tab activated

Methods

Methods are publicly available to all active instances, unless otherwise stated.

activate

Activates instance.

$(".target").tabs("activate");

defaults

Extends plugin default settings; effects instances created hereafter.

$.tabs("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").tabs("destroy");

disable

Disables instance.

$(".target").tabs("disable");

enable

Enables instance.

$(".target").tabs("enable");

CSS

Class Type Description
.fs-tabs-element element Target elmement
.fs-tabs element Base widget class
.fs-tabs.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-tab element Tab handle element
.fs-tabs-tab.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-tab.fs-tabs-active modifier Indicates active state
.fs-tabs-tab.fs-tabs-mobile modifier Indicates mobile interface
.fs-tabs-content element Tab content element
.fs-tabs-content.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-content.fs-tabs-active modifier Indicates active state
.fs-tabs-tab_mobile element Mobile tab handle element
.fs-tabs-tab_mobile.fs-tabs-active modifier Indicates active state