Tabs

A jQuery plugin for simple tabs.

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