jQuery UI Tabs

jQuery UI Tabs organizes related content into a tab list and associated panels. It supports local panels, remote content, disabled tabs, collapsible behavior, show/hide effects and lifecycle events.

Basic Tabs Top ↑

$( function () {
    $( "#tabs" ).tabs({
        heightStyle: "auto"
    });
});

<div id="tabs">
  <ul>
    <li><a href="#php">PHP</a></li>
    <li><a href="#html">HTML</a></li>
    <li><a href="#js">JavaScript</a></li>
    <li><a href="#mysql">MySQL</a></li>
  </ul>

  <div id="php">PHP content</div>
  <div id="html">HTML content</div>
  <div id="js">JavaScript content</div>
  <div id="mysql">MySQL content</div>
</div>

Tabs Options Top ↑

active

Choose the active tab by zero-based index. With collapsible: true, active: false can start with all panels closed.

$( "#my_tabs" ).tabs({
    active: 3
});

const activeIndex =
    $( "#my_tabs" ).tabs( "option", "active" );

$( "#my_tabs" ).tabs( "option", "active", 1 );

$( "#my_tabs" ).tabs({
    active: false,
    collapsible: true
});

Demo: active tab →

Demo: change active tab from radio buttons →

Demo: start with all panels collapsed →

classes

Add or replace classes associated with Tabs structural elements.

$( "#my_tabs" ).tabs({
    classes: {
        "ui-tabs": "ui-state-highlight"
    }
});

const currentClass =
    $( "#my_tabs" ).tabs(
        "option",
        "classes.ui-tabs"
    );

$( "#my_tabs" ).tabs(
    "option",
    "classes.ui-tabs",
    "ui-state-error"
);

Demo: read and set Tabs classes →

collapsible

Allow the active tab to be collapsed by activating it again.

const collapsible =
    $( "#my_tabs" ).tabs(
        "option",
        "collapsible"
    );

$( "#my_tabs" ).tabs(
    "option",
    "collapsible",
    true
);

Demo: collapsible option →

disabled

Disable all tabs with true or selected tabs with an array of indexes.

$( "#my_tabs" ).tabs({
    disabled: [0, 3]
});

const disabledTabs =
    $( "#my_tabs" ).tabs(
        "option",
        "disabled"
    );

$( "#my_tabs" ).tabs(
    "option",
    "disabled",
    [1, 3]
);

Demo: disabled tabs →

Demo: choose disabled tabs with checkboxes →

event

Choose the event that activates a tab. The default is click.

$( "#my_tabs" ).tabs({
    event: "mouseover"
});

const eventName =
    $( "#my_tabs" ).tabs(
        "option",
        "event"
    );

$( "#my_tabs" ).tabs(
    "option",
    "event",
    "click"
);

Demo: activate tabs with mouseover →

Demo: set the event option →

heightStyle

Control panel heights with content, fill, or auto.

$( "#my_tabs" ).tabs({
    heightStyle: "fill"
});

const heightStyle =
    $( "#my_tabs" ).tabs(
        "option",
        "heightStyle"
    );

$( "#my_tabs" ).tabs(
    "option",
    "heightStyle",
    "auto"
);

Demo: heightStyle →

Demo: set heightStyle →

hide

Control the animation used when a tab panel is hidden.

$( "#my_tabs" ).tabs({
    hide: {
        effect: "slide",
        duration: 800
    }
});

$( "#my_tabs" ).tabs(
    "option",
    "hide",
    {
        effect: "blind",
        duration: 800
    }
);

jQuery UI effect list →

Demo: hide effect →

Demo: change hide effects →

show

Control the animation used when a tab panel is shown.

$( "#my_tabs" ).tabs({
    show: {
        effect: "fade",
        duration: 700
    }
});

$( "#my_tabs" ).tabs(
    "option",
    "show",
    {
        effect: "fade",
        duration: 600
    }
);

Demo: show effect →

Demo: change show effects →

Tabs Methods Top ↑

destroy()

Remove Tabs behavior and return the original markup.

$( "#my_tabs" ).tabs( "destroy" );

Open demo →

disable()

Disable the Tabs widget.

$( "#my_tabs" ).tabs( "disable" );

Open demo →

Open demo →

enable()

Enable a previously disabled Tabs widget.

$( "#my_tabs" ).tabs( "enable" );

Open demo →

Open demo →

instance()

Return the Tabs widget instance.

const instance = $( "#my_tabs" ).tabs( "instance" );

load()

Load/reload a remote tab by index.

$( "#my_tabs" ).tabs( "load", 2 );

option()

Read one option or the complete options object.

const active = $( "#my_tabs" ).tabs( "option", "active" );
const options = $( "#my_tabs" ).tabs( "option" );

Open demo →

refresh()

Refresh Tabs after tabs/panels are added or removed directly in the DOM.

$( "#my_tabs" ).tabs( "refresh" );

widget()

Return the Tabs widget element as a jQuery object.

const widget = $( "#my_tabs" ).tabs( "widget" );

Tabs Events Top ↑

activate

Fires after a tab is activated.

$( "#my_tabs" ).tabs({
    activate: function ( event, ui ) {
    console.log( ui.newTab.text() );
}
});

beforeActivate

Fires before a tab changes. Returning false can cancel activation.

$( "#my_tabs" ).tabs({
    beforeActivate: function ( event, ui ) {
    console.log( "Changing tab" );
}
});

beforeLoad

Fires before remote tab content is loaded.

$( "#my_tabs" ).tabs({
    beforeLoad: function ( event, ui ) {
    console.log( ui.ajaxSettings.url );
}
});

create

Fires when Tabs is initialized.

$( "#my_tabs" ).tabs({
    create: function ( event, ui ) {
    console.log( "Tabs created" );
}
});

load

The load event fires after remote tab content has loaded.

$( "#my_tabs" ).tabs({
    load: function ( event, ui ) {
    console.log( "Remote tab loaded" );
}
});

Themes Top ↑

The original tutorial includes a theme-switching example.

Demo: Tabs with different jQuery UI themes →

Manage Tabs Width Top ↑

Use normal CSS rather than putting JavaScript-style comments inside a CSS declaration.

.ui-tabs {
    width: 800px; /* Change this value */
}

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: