jQuery Tabber Demos

Basic

Target tabbed interfaces should match the following markup pattern:

<div class="tabbed">
	<nav>
		<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>
	</nav>
	<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
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui velit aliquet.
Erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus porttitor ligula.

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
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui velit aliquet.
Erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.