Tabs

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

Tabs have a particular set of markup that must be used in order for them to work properly:

• The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list
• Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribute
• Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.

The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event option.

Below is some sample markup:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Keyboard interaction

When focus is on a tab, the following key commands are available:

• UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
• DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
• CTRL + UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. The focused tab must be manually activated.
• CTRL + DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. The focused tab must be manually activated.
• HOME: Move focus to the first tab. Activate focused tab after a short delay.
• END: Move focus to the last tab. Activate focused tab after a short delay.
• CTRL + HOME: Move focus to the first tab. The focused tab must be manually activated.
• CTRL + END: Move focus to the last tab. The focused tab must be manually activated.
• SPACE: Activate panel associated with focused tab.
• ENTER: Activate or toggle panel associated with focused tab.
• ALT/OPTION + PAGE UP: Move focus to the previous tab and immediately activate.
• ALT/OPTION + PAGE DOWN: Move focus to the next tab and immediately activate.

When focus is in a panel, the following key commands are available:

• CTRL + UP: Move focus to associated tab.
• ALT/OPTION + PAGE UP: Move focus to the previous tab and immediately activate.
• ALT/OPTION + PAGE DOWN: Move focus to the next tab and immediately activate.

• ui-tabs: The outer container of the tabs. This element will additionally have a class of ui-tabs-collapsible when the collapsible option is set.
  • ui-tabs-nav: The list of tabs.
    • The active list item in the nav will have a ui-tabs-active class. Any list item whose associated content is loading via an Ajax call will have a ui-tabs-loading class.
      • ui-tabs-anchor: The anchors used to switch panels.
  • ui-tabs-panel: The panels associated with the tabs. Only the panel whose corresponding tab is active will be visible.

Dependencies

• UI Core
• Widget Factory
• Effects Core (optional; for use with the show and hide options)

• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Multiple types supported:

• Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
• Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Code examples:

Initialize the tabs with the active option specified:

$( ".selector" ).tabs({
  active: 1
});

Get or set the active option, after initialization:

// Getter
var active = $( ".selector" ).tabs( "option", "active" );
 
// Setter
$( ".selector" ).tabs( "option", "active", 1 );

Code examples:

Initialize the tabs with the collapsible option specified:

$( ".selector" ).tabs({
  collapsible: true
});

Get or set the collapsible option, after initialization:

// Getter
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
 
// Setter
$( ".selector" ).tabs( "option", "collapsible", true );

Multiple types supported:

• Boolean: Enable or disable all tabs.
• Array: An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab.

Code examples:

Initialize the tabs with the disabled option specified:

$( ".selector" ).tabs({
  disabled: [ 0, 2 ]
});

Get or set the disabled option, after initialization:

// Getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
 
// Setter
$( ".selector" ).tabs( "option", "disabled", [ 0, 2 ] );

Code examples:

Initialize the tabs with the event option specified:

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

Get or set the event option, after initialization:

// Getter
var event = $( ".selector" ).tabs( "option", "event" );
 
// Setter
$( ".selector" ).tabs( "option", "event", "mouseover" );

Code examples:

Initialize the tabs with the heightStyle option specified:

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

Get or set the heightStyle option, after initialization:

// Getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );
 
// Setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );

Multiple types supported:

• Boolean: When set to false, no animation will be used and the panel will be hidden immediately. When set to true, the panel will fade out with the default duration and the default easing.
• Number: The panel will fade out with the specified duration and the default easing.
• String: The panel will be hidden using the specified effect. The value can either be the name of a built-in jQuery animation method, such as "slideUp", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing.
• Object: If the value is an object, then effect, delay, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeOut" will be used. If delay is omitted, then no delay is used.

Code examples:

Initialize the tabs with the hide option specified:

$( ".selector" ).tabs({
  hide: { effect: "explode", duration: 1000 }
});

Get or set the hide option, after initialization:

// Getter
var hide = $( ".selector" ).tabs( "option", "hide" );
 
// Setter
$( ".selector" ).tabs( "option", "hide", { effect: "explode", duration: 1000 } );

Multiple types supported:

• Boolean: When set to false, no animation will be used and the panel will be shown immediately. When set to true, the panel will fade in with the default duration and the default easing.
• Number: The panel will fade in with the specified duration and the default easing.
• String: The panel will be shown using the specified effect. The value can either be the name of a built-in jQuery animation method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing.
• Object: If the value is an object, then effect, delay, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used. If delay is omitted, then no delay is used.

Code examples:

Initialize the tabs with the show option specified:

$( ".selector" ).tabs({
  show: { effect: "blind", duration: 800 }
});

Get or set the show option, after initialization:

// Getter
var show = $( ".selector" ).tabs( "option", "show" );
 
// Setter
$( ".selector" ).tabs( "option", "show", { effect: "blind", duration: 800 } );

• This method does not accept any arguments.

$( ".selector" ).tabs( "destroy" );

• This signature does not accept any arguments.

$( ".selector" ).tabs( "disable" );

• index
  Type: Number
  The zero-based index of the tab to disable.

$( ".selector" ).tabs( "disable", 1 );

• href
  Type: String
  The href of the tab to disable.

$( ".selector" ).tabs( "disable", "#foo" );

• This signature does not accept any arguments.

$( ".selector" ).tabs( "enable" );

• index
  Type: Number
  The zero-based index of the tab to enable.

$( ".selector" ).tabs( "enable", 1 );

• href
  Type: String
  The href of the tab to enable.

$( ".selector" ).tabs( "enable", "#foo" );

• This method does not accept any arguments.

$( ".selector" ).tabs( "instance" );

• index
  Type: Number
  The zero-based index of the tab to load.

$( ".selector" ).tabs( "load", 1 );

• href
  Type: String
  The href of the tab to load.

$( ".selector" ).tabs( "load", "#foo" );

• optionName
  Type: String
  The name of the option to get.

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );

• This signature does not accept any arguments.

var options = $( ".selector" ).tabs( "option" );

• optionName
  Type: String
  The name of the option to set.
• value
  Type: Object
  A value to set for the option.

$( ".selector" ).tabs( "option", "disabled", true );

• options
  Type: Object
  A map of option-value pairs to set.

$( ".selector" ).tabs( "option", { disabled: true } );

• This method does not accept any arguments.

$( ".selector" ).tabs( "refresh" );

• This method does not accept any arguments.

var widget = $( ".selector" ).tabs( "widget" );

• This method does not accept any arguments.

_getList: function() {
  var list = this.element.find( ".my-tabs" );
  return list.length ? list.eq( 0 ) : this._super();
}

• event
  Type: Event
• ui
  Type: Object
  • newTab
    Type: jQuery
    The tab that was just activated.
  • oldTab
    Type: jQuery
    The tab that was just deactivated.
  • newPanel
    Type: jQuery
    The panel that was just activated.
  • oldPanel
    Type: jQuery
    The panel that was just deactivated.

$( ".selector" ).tabs({
  activate: function( event, ui ) {}
});

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

• event
  Type: Event
• ui
  Type: Object
  • newTab
    Type: jQuery
    The tab that is about to be activated.
  • oldTab
    Type: jQuery
    The tab that is about to be deactivated.
  • newPanel
    Type: jQuery
    The panel that is about to be activated.
  • oldPanel
    Type: jQuery
    The panel that is about to be deactivated.

$( ".selector" ).tabs({
  beforeActivate: function( event, ui ) {}
});

$( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} );

• event
  Type: Event
• ui
  Type: Object
  • tab
    Type: jQuery
    The tab that is being loaded.
  • panel
    Type: jQuery
    The panel which will be populated by the Ajax response.
  • jqXHR
    Type: jqXHR
    The jqXHR object that is requesting the content.
  • ajaxSettings
    Type: Object
    The properties that will be used by jQuery.ajax to request the content.

$( ".selector" ).tabs({
  beforeLoad: function( event, ui ) {}
});

$( ".selector" ).on( "tabsbeforeload", function( event, ui ) {} );

• event
  Type: Event
• ui
  Type: Object
  • tab
    Type: jQuery
    The active tab.
  • panel
    Type: jQuery
    The active panel.

$( ".selector" ).tabs({
  create: function( event, ui ) {}
});

$( ".selector" ).on( "tabscreate", function( event, ui ) {} );

• event
  Type: Event
• ui
  Type: Object
  • tab
    Type: jQuery
    The tab that was just loaded.
  • panel
    Type: jQuery
    The panel which was just populated by the Ajax response.

$( ".selector" ).tabs({
  load: function( event, ui ) {}
});

$( ".selector" ).on( "tabsload", function( event, ui ) {} );

A simple jQuery UI Tabs

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tabs demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    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.
  </div>
  <div id="fragment-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.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>