tabbed.js

JavaScript plugin for tabs.

Usage

Activate tabbed.js with new Tabbed(Element), tabbed(NodeList), or $('#tabbed').tabbed(Object) when using jQuery.

<div id="tabs-1" class="tabbed" data-animationEngine="css">
	<div class="tabs" role="tablist">
		<div class="tabs-inner">
			<button class="tab active" data-pane="pane1" role="tab">
				Title
			</button><!-- No space.
			--><button class="tab" data-pane="pane2" role="tab">
				Some Information
			</button><!-- No space.
			--><button class="tab" data-pane="pane3" role="tab">
				Last Tab
			</button>
		</div>
	</div>
	<div class="divider"><div class="highlighter"></div></div>
	<div class="panes">
		<div id="pane1" class="pane active" role="tabpanel">
		  Panel 1
		</div>
		<div id="pane2" class="pane" role="tabpanel">
		  Panel 2
		</div>
		<div id="pane3" class="pane" role="tabpanel">
		  Panel 3
		</div>
	</div>
	<div class="buttons">
		<button class="button previous invisible" type="button">&lt; Back</button>
		<button class="button finish" type="submit">Submit</button>
		<button class="button next invisible" type="button">Next &gt;</button>
	</div>
</div>

new Tabbed(document.getElementById('tabs-1')/*, {options} */);

/* Or multiple tabs:
tabbed([a, b, c], {...})
*/

/* Or with jQuery:
$('#tabs-1').tabbed({...});
*/

Options

Pass in attributes like this:

new Tabbed(element, {
  optionName: optionValue
});

Or put them on an element as data attributes:

data-optionName="optionValue"

Option	Type	Default	Description
animationEngine	String	gsap	The only supported engine is currently gsap. Any other value will disable animations.
animation	String	slide	Currently unused.
direction	String	horizontal	Which direction to scroll the tabs. Valid values are horizontal and vertical.
placement	String	above	Where to place the tabs. Valid values are above, left, and right.
slideSpeed	Number	0.5	Speed of the sliding animation.
fadeSpeed	Number	0.2	Speed of the fading animation.
offset	Number	null	Offset when scrolling to the top.
history	Boolean	false	Whether to enable history support.
historyType	String	query	Valid values are query and page. Not used if history is false.
endPageWithSlash	Boolean	true	Applies when historyType is page.
queryVariable	String	tab	The name of the query variable. Not used if historyType is not query or history is false.