Search within TutorialsPark

jQuery UI : Tab Widget

Learn how to use jQuery UI Tab Widget

jQuery UI : Tab Widget

jQuery UI Tabs is used to create Tab Widgets, which serve the same purpose as Accordions of displaying the Content in seperate parts.

The tab widget is used to toggle visibility across a set of different elements, here each element contains content which can be viewed by clicking on the tab Header.

Tabs are positioned such that they appear lined up next to each other horizontally, except for the active panel all other content sections are set to display:none

At any given time at the most only one tab can be opened, tabs can also be configured so that all panels are closed.

jQuery UI Tabs: Creating a Tab Widget

jQuery UI Tabs can be created using tabs method, you also need to put the HTML structure inorder and then apply the tab method.

The element within the tabs must comprise of two elements.The content elements which are those elements which should appear within the tabs, and structure elements to create the structure.

In the Demo below, we have div elements to hold the contents, each div element has an id attribute to locate the right element.

Example: jQuery Accordion UI - Creating a Tab Widget

Give it a TRY! » Note: Clicking on the tab header allows you to open the corresponding content.

jQuery UI Tabs: Configuring Tab Widgets

In term of utility Tabs have similar features like Accordions, tabs are the vertical version of Accordion.

But the number of configuration options and settings available for Tabs far exceeds Accordions, the table Below shows the meaning and application of Tab Settings.

An object literal , or an object reference can be passed a value for the tabs() widget to configure these options.

Table : Configuring the Tabs Widget

Option Description
active To specify which panel should be opened. Default Value is 0
collapsible To allow an active tab to be unselected when clicked, so that all content panels get hidden with only the tab headings being visible.Default Value is false
disabled To disable a tab widget on page load, you can even pass tab index(zero based) inorder to disable static tabs. Default Value is false
event To specify the event to trigger the Tabs to display the content panels.Default Value is Click
heightStyle To control the height of the tab widget and all its panels. Default value is content. Other values are auto and fill
hide To specify the animation while hiding the panel.The default value of null
show To specify the animation while showing the panel.The default value is null

jQuery UI Tabs: Selecting a Tab

The jQuery UI Tab widget provides a number of options to perform various tasks, like selecting or disabling tabs or adding transition effects etc.

To select a Tab to be opened specify the index number(zero based) as a value for the property active

Example: jQuery UI Tabs - Selecting a Tab

Give it a TRY! » Note: To open no tabs, select the value of collapsible:true and active:false

jQuery UI Tabs : Disabling Tabs

The jQuery UI Tabs widget allows you to disable certain tabs until a condition is met, using the property disabled.

In the demo below, we have set the value of the disabled property to the index no(zero based) of the tab to be disabled

Example: jQuery AutoComplete UI - Changing the Trigger Event

Give it a TRY! » Note:The disabled tabs will not respond to mouse interactions of any type.

jQuery UI Tabs : Adding Transition Effects.

The jQuery UI Tabs can be added with Transition effects using the property show , these animation are displayed when the tabs are either opened or closed.

The options are configured using object literals,the object show has two properties: effect and duration.

Example: jQuery UI Tabs - Adding Transition Effects

Give it a TRY! » Note:The value of effect property can be toggle , fadeIn or

jQuery UI Tabs : Setting the Animation

The jQuery UI Tabs widget can be assigned with Animation Settings, and duration using variable animate.

Example: jQuery UI Tabs - Setting the Animation

Give it a TRY! » Note: The easing effect of easeOutBounce lasts for 3000ms i.e 3 sec

jQuery UI Tabs : Using Collapsible Tabs

The jQuery UI Tabs can be converted into a hybrid between accordion and tabs using setting of collapsible

When the value of collapsible is set as true, clicking on the active tab makes it collapse like an accordion.

Example: jQuery UI Tabs - Using Collapsible Tabs

Give it a TRY! » Note: Clicking a deactivated tab will select the tab and show the associated content panel.

jQuery UI Tabs : Changing the Event Trigger

The jQuery UI Tabs Widgets by default are triggered using a click.But you can alter this using event setting.

The value of the event setting can be any other custom event, like mouseover, keyup etc.

Example: jQuery UI Tabs - Changing the Event Trigger

Give it a TRY! » Note: In the demo, you can switch between tabs using the mouseover event.