jQuery UI Tabs

Tabs are the set of logically grouped content that facilitates users to flip between them. Tabs save the space like accordions.

Every tab must use the following set of markups to work properly.

Tabs must be in an ordered <ol> or unordered <ul> list.
Each tab title must be within each <li> and wrapped by anchor (<a>) tag with a 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.

jQuery UI tabs() method is used to change the appearance of HTML elements inside the page. This method traverses the HTML code and adds new CSS classes to the element to give them appropriate style.

Syntax:

You can use tabs () method in two forms:

First Method

The tabs (options) method specifies that an HTML element and its content should be managed as tabs. Here "options" parameter is an object that specifies the appearance and behavior of tabs.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:

Following is a list of options that can be used with this method:

Option	Description
active	This option indicates the current active tab/panel. By default its value is 0.
collapsible	If you set this option to TRUE, it allows tabs to be deselected. When it is set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.
disabled	This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). for example, use [0, 1] to disable the first two tabs. By default its value is false.
event	This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".
heightStyle	This option controls the height of the tabs widget. By default its value is "content".
hide	This option specifies how to animate hiding of panel. By default its value is null.
show	This option specifies how to animate showing of panel. By default its value is NULL.

jQuery UI tabs() example 1

Let's take a simple example to demonstrate the functionality of tab, passing no parameter to the tabs() method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-1">
         <ul>
            <li><a href="#tabs-2">Poem</a></li>
            <li><a href="#tabs-3">Joke</a></li>
            <li><a href="#tabs-4">Quote</a></li>
         </ul>
         <div id="tabs-2">
            <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
         </div>
         <div id="tabs-3">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
         </div>
         <div id="tabs-4">
            <p>" The whole secret of existence is to have no fear."
Buddha</p>
         </div>
      </div>
   </body>
</html>

Test it Now

jQuery UI tabs() example 2

Use of heightStyle, collapsible and hide:

Let's take an example to demonstrate the usage of options heightStyle, collapsible and hide in the tabs function of jQueryUI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: yellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-5">
         <ul>
            <li><a href="#tabs-6">Poem</a></li>
            <li><a href="#tabs-7">Joke</a></li>
            <li><a href="#tabs-8">Quote</a></li>
         </ul>
         <div id="tabs-6">
                        <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>

         </div>
         <div id="tabs-7">
           <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>

            </div>
         <div id="tabs-8">
                        <p>" The whole secret of existence is to have no fear."
Buddha</p>

         </div>
      </div>
   </body>
</html>

Test it Now

jQuery UI tabs() example 3

Use of event:

Let's take an example to demonstrate the use of option event in the tab function of jQueryUI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-9">
         <ul>
            <li><a href="#tabs-10">Poem</a></li>
            <li><a href="#tabs-11">Joke</a></li>
            <li><a href="#tabs-12">Quote</a></li>
         </ul>
         <div id="tabs-10">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>

         </div>
         <div id="tabs-11">
          <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-12">
           <p>" The whole secret of existence is to have no fear."
Buddha</p>
       </div>
      </div>
   </body>
</html>

Test it Now

Second Method

The tabs ("action", params) method allows an action on the tabs (through a JavaScript program) to select, disable, add or remove a tab. Here "action" is specified as a string in the first argument (e.g., "add" to add a new tab).

Syntax:

Following is a list of different actions that can be used with this method.

Action	Description
destroy	This action destroys the tabs functionality of an element completely and makes elements return to their pre-init state. This method does not accept any arguments.
disable	This action disables all tabs. This method does not accept any arguments.
disable( index )	This action is used to disable the specified tab. Here index is the tab to be disabled.
enable	This action activates all the tabs. This signature does not accept any arguments.
enable( index )	This action activates a specified tab. Here index is the tab to be enabled.
load( index )	This action forces a reload of the indexed tab, ignoring the cache. Here index is the tab to load.
option( optionName )	This action gets the value currently associated with the specified optionName.
option	This action gets an object containing key/value pairs representing the current tabs options hash.
option( optionName, value )	This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value of the option to be set.
option( Options )	This action sets one or more options to the tabs.
refresh	This action re-computes the height of the tab panels when any tabs that were added or removed directly in the DOM. Its result depends on the content and the heightStyle option.
widget	This action returns the element serving as the tabs widget, annotated with the UI-tabs class name.

jQuery UI tabs() example 4

Use of action diable():

Let's take an example to see the use of action disable() method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-13">
         <ul>
            <li><a href="#tabs-14">Tab 1</a></li>
            <li><a href="#tabs-15">Tab 2</a></li>
            <li><a href="#tabs-16">Tab 3</a></li>
         </ul>
         <div id="tabs-14">
                      <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
 </div>
         <div id="tabs-15">
                     <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-16">
                      <p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
      </div>
   </body>
</html>

Test it Now

Next TopicjQuery UI Tooltip

← prev next →