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. |