jQuery UI Tabs / Tabs 3

Tabs Extensions Rotating tabs demo Nested tabs demo

Simple Tabs

One
Two
Three

First tab is active by default:

$('#container-1 > ul').tabs();

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second tab is active:

$('#container-2 > ul').tabs({ selected: 1 });

Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:

If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.
Same if you use the cookie option to save the latest selected tab in.
Last not least you can set the selected tab by attaching the selected tab class class (default: "ui-tabs-selected") to one of the li elements representing a single tab.

Slide Effect

One
Two
Three

Use a slide effect to switch tabs. You can optionally specify the speed for the animation with the option fxSpeed: value. The value is either a string of one of the predefined speeds in jQuery (slow, normal, fast) or an integer value specifying the duration for the animation in milliseconds. If omitted it defaults to normal.

$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });

Fade Effect

One
Two
Three

Use a fade effect to switch tabs. You can optionally specify the speed for the animation with the option fxSpeed: value. The value is either a string of one of the predefined speeds in jQuery (slow, normal, fast) or an integer value specifying the duration for the animation in milliseconds. If omitted it defaults to normal.

$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });

Slide and Fade Effect Combined

One
Two
Three

Use a combined slide and fade effect to switch tabs:

$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

Callbacks

One
Two
Three

Define callback functions that are invoked at different points in time during the tab switch process.
If the select callback returns false, the clicked tab won't be selected. This is useful if switching tabs requires form validation before for example.

$('#container-6 > ul').tabs({
    select: function(ui) {
        alert('select');
    },
    show: function(ui) {
        alert('show');
    }
});

Custom animation

One
Two
Three

Define your own custom animation:

$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });

Ajax tabs

Triggering, Enabling, Disabling, Adding and Removing Tabs

One
Two
Three

$('#container-9 > ul').tabs('select', 2); // simulate click on 3rd tab
$('#container-9 > ul').tabs('enable', 2); // enable 3rd tab
$('#container-9 > ul').tabs('disable, 2); // disable 3rd tab
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab'); // add new tab at the end
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab', 1); // add new tab at 2nd position
$('#container-9 > ul').tabs('remove', 3); // remove 4th tab

One or more tabs can also be disabled immediatly by simply setting the disabling class for the li element representing that particular tab:

<li class="ui-tabs-disabled">…</li>

Or by using the disabled option:

$('#container-9 > ul').tabs({ disabled: [1, 2] });

Start with all tabs unselected/allow toggle visibility

One
Two
Three

$('#container-10 > ul').tabs({ selected: null }); // start with all tabs hidden
$('#container-10 > ul').tabs({ unselect: true }); // selected tab closes on click

Custom event

One
Two
Three

Define mouseover event to switch tabs

$('#container-11 > ul').tabs({ event: 'mouseover' });

Changelog

3.5 (jQuery UI 1.5) - simplified API, truly events based callback system, all things zero-based for consistency, removed hide callback (obsolete, wasn't used by anyone), set selected tab via selected option, set all tabs unselected via selected: null instead of another redundant option, simplified effects options - one fx option (which mirrors jQuerys default animate options) instead of a bunch of others to remember.
3.0 - release

Tested with

Firefox 2
Safari 2.0.4
Opera 9.24
IE 7
IE 6