Tabber Demo


View Documentation

Basic

Target tabbed interfaces should match the following markup pattern:


<div class="tabbed">
	<menu class="tabber-menu">
		<a href="#tab-1" class="tabber-handle">Tab 1</a>
		<a href="#tab-2" class="tabber-handle">Tab 2</a>
		<a href="#tab-3" class="tabber-handle">Tab 3</a>
	</menu>
	<div class="tabber-tab" id="tab-1">
		Content...
	</div>
	<div class="tabber-tab" id="tab-2">
		Content...
	</div>
	<div class="tabber-tab" id="tab-3">
		Content...
	</div>
</div>
			
$(".tabbed").tabber();
Demo
Tab 1 Tab 2 Tab 3

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui velit aliquet. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus porttitor ligula. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.


Breakpoint

By default, Tabber will enable itself on screens smaller then 980 pixels wide. You can specify a different width by setting the maxWidth option on initialization.

$(".tabbed").tabber({ maxWidth: "740px" });
Demo
Tab 1 Tab 2

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui velit aliquet. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.


Vertical

You can also create a vertical tab set:

$(".tabbed").tabber({
	vertical: true
});
Demo
Tab 1 Tab 2 Tab 3

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui velit aliquet. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus porttitor ligula. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.


IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).