tabbed.js v2.1.5

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"