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.