# jQuery UI Tabs / Tabs 3

Download

Documentation

## Simple Tabs

- One
- Two
- Three

First tab is active by default:

    $('#container').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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Start With Custom Tab

- One
- Two
- Three

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').tabs(2);

Two alternative ways to specify the active tab will overrule this argument. First a li element (representing one single tab) belonging to the selected tab class, e.g. set the selected tab class (default: "tabs-selected", see option selectedClass) for one of the unordered li elements in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers to the id of a tab container of a tab interface the corresponding tab will be activated and both the initial argument as well as an eventually declared class attribute will be overruled.

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.

## 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').tabs({ fxSlide: true });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## 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').tabs({ fxFade: true, fxSpeed: 'fast' });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Slide and Fade Effect Combined

- One
- Two
- Three

Use a combined slide and fade effect to switch tabs:

    $('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Callbacks

- One
- Two
- Three

Define callback functions that are invoked at different points in time during the tab switch process. These functions are invoked with three arguments: the first one being the clicked tab (the `a` element), the second one being the `div` element that holds the content of the clicked tab and the third one being the `div` element belonging to the tab that gets hidden.
If the onClick callback returns false, the tab switch is canceled. This is especially useful if switching tabs requires form validation before for example.

    $('#container').tabs({
        click: function() {
            alert('click callback');
        },
        hide: function() {
            alert('hide callback');
        },
        show: function() {
            alert('show callback');
        }
    });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Custom animation

- One
- Two
- Three

Define your own custom animation:

    $('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Ajax tabs

- One
- Two
- Three

## Triggering, Enabling, Disabling, Adding and Removing Tabs

- One
- Two
- Three

    $('#container').tabsClick(3); // simulate click on 3rd tab
    $('#container').tabsEnable(3); // enable 3rd tab
    $('#container').tabsDisable(3); // disable 3rd tab
    $('#container').tabsAdd('#new-tab', 'New Tab', 4); // add new 4th tab
    $('#container').tabsRemove(4); // 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 or by using the `disabled` option.

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

    $('#container').tabs({ disabled: [2, 3] });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Start with all tabs unselected/allow toggle visibility

- One
- Two
- Three

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

Setting `unselected` option to `true` automatically sets `unselect` as well.

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Custom event

- One
- Two
- Three

Define mouseover event to switch tabs (or any other reasonable event)

    $('#container').tabs({ event: 'mouseover' });

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

## Changelog

- 3.0 - release

## Tested with

- Firefox 2.0
- Firefox 1.5
- Firefox 1.0
- Opera 9.01
- Opera 8.52
- Safari 2.0.4
- IE 7
- IE 6