To modify the appearance of the HTML elements inside the page, by traversing the HTML code and by adding new CSS classes to the element, the jQuery UI tabs() method is used. A set of logically grouped content that also allows flipping between them is called tabs in JQuery UI. The JQuery UI Tabs are used to save space like accordions. The following set of markups is used by every tab so that it can work properly. Being itself in an ordered <ol> or unordered <ul> list, the title of the JQuery UI Tabs also must be within each <li>. The title of the JQuery UI Tabs should be wrapped by the anchor (<a>) tag with a href attribute. With an id corresponding to the hash in the anchor of the associated tab, which is a must, a tab panel can be any valid element.
Syntax:
The tabs() method can be used in two forms:
$(selector, context).tabs (options) Method
OR
$(selector, context).tabs (“action”, params) Method
First Method:
To instruct that an HTML element and its content should be managed as tabs, the tabs (options) method is used. The appearance and behavior of tabs are defined by the options parameter, which is an object.
Syntax:
$(selector, context).tabs (options);
Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.
Syntax:
$(selector, context).tabs({option1: value1, option2: value2..... });
The various options that can be used with this method are listed below:
| Option | Uses |
| active | To specify the currently active tab/panel. The default value is 0. |
| collapsible | To allow tabs to be deselected when set to TRUE. On clicking a selected tab, it does not deselect and remains selected, when it is set to false. The default value is false. |
| disabled | To indicate the index tabs that are disabled (and therefore cannot be selected). It uses an array. For example, the value [0, 1] is used to disable the first two tabs. The default value is false. |
| event | To specify the name of the event that lets users select a new tab. Passing the mouse over a tab will select it when set to “mouseover”. The default value is “click”. |
| heightStyle | To control the height of the tabs widget. The default value is “content”. |
| hide | To define the way to animate the hiding of the panel. The default value is null. |
| show | To define the way to animate the showing of the panel. The default value is NULL. |
Example 1:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tab-1" ).tabs();
});
</script>
<style>
#tab-1{font-size: 18px;}
.ui-widget-header {
background:crimson;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="tab-1">
<ul>
<li><a href="#tab-2">Flower</a></li>
<li><a href="#tab-3">Fruit</a></li>
<li><a href="#tab-4">Vegetable</a></li>
</ul>
<div id="tab-2">
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).
</p>
</div>
<div id="tab-3">
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>
</div>
<div id="tab-4">
<p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the functionality of the tab. Here, we are passing no parameter to the tabs() method.
Example 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tab-1" ).tabs({
heightStyle:"fill",
collapsible:true,
hide:"slideUp"
});
});
</script>
<style>
#tab-1{font-size: 18px;}
.ui-widget-header {
background:crimson;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="tab-1">
<ul>
<li><a href="#tab-2">Flower</a></li>
<li><a href="#tab-3">Fruit</a></li>
<li><a href="#tab-4">Vegetable</a></li>
</ul>
<div id="tab-2">
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).
</p>
</div>
<div id="tab-3">
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>
</div>
<div id="tab-4">
<p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of the heightStyle, collapsible, and hide options in the tabs function of jQueryUI. Here, the content of the tab slides up on clicking the title of the tab and gets visible again on the next click.
Example 3:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tab-1" ).tabs({
event:"mouseover"
});
});
</script>
<style>
#tab-1{font-size: 18px;}
.ui-widget-header {
background:crimson;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="tab-1">
<ul>
<li><a href="#tab-2">Flower</a></li>
<li><a href="#tab-3">Fruit</a></li>
<li><a href="#tab-4">Vegetable</a></li>
</ul>
<div id="tab-2">
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).
</p>
</div>
<div id="tab-3">
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>
</div>
<div id="tab-4">
<p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of the event option in the tab function of jQueryUI. Here, we can switch between the tabs only by placing the mouse over the title of the tab. Thus, no clicking is required in this case.
Second Method:
To allow an action on the tabs to select, disable, add, or remove a tab, the tabs (“action”, params) method. It does so through a JavaScript program. The first argument here is “action” which is specified as a string. For example, to add a new tab, the “add” method is passed as a value to the “action” argument.
Syntax:
$(selector, context).tabs ("action", params);
The various actions that can be used with this method are listed below:
| Action | Uses |
| destroy | To destroy the tabs functionality of an element completely and make elements return to their pre-init state. No argument is accepted by this method. |
| disable | To disable all tabs. No argument is accepted by this method. |
| disable( index ) | To disable the specified tab. The tab to be disabled is specified by the index parameter. |
| enable | To activate all the tabs. No argument is accepted by this method. |
| enable( index ) | To activate a specified tab. The tab to be enabled is specified by the index parameter. |
| load( index ) | To force a reload of the indexed tab, ignoring the cache. The tab to load is specified by the index parameter. |
| option( optionName ) | To retrieve the value currently associated with the specified optionName. |
| option | To retrieve an object containing key/value pairs representing the current tabs options hash. |
| option( optionName, value ) | To set the value of the tabs option associated with the specified optionName. The name of the option to be set is specified by the argument optionName and the value defines the value of the option to be set. |
| option( Options ) | To set one or more options to the tabs. |
| refresh | To re-compute the height of the tab panels when any tabs were added or removed directly in the DOM. The output is based on the content and the heightStyle option. |
| widget | To get the element serving as the tabs widget, annotated with the UI-tabs class name. |
Example 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
( "#tab-1" ).tabs("disable");
});
</script>
<style>
#tab-1{font-size: 18px;}
.ui-widget-header {
background:gray;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="tab-1">
<ul>
<li><a href="#tab-2">Flower</a></li>
<li><a href="#tab-3">Fruit</a></li>
<li><a href="#tab-4">Vegetable</a></li>
</ul>
<div id="tab-2">
<p>The seed-bearing part of a plant, consisting of reproductive organs (stamens and carpels) that are typically surrounded by a brightly coloured corolla (petals) and a green calyx (sepals).
</p>
</div>
<div id="tab-3">
<p>The sweet and fleshy product of a tree or other plant that contains seeds and can be eaten as food.</p>
</div>
<div id="tab-4">
<p>A plant or part of a plant used as food, such as cabbage, potato, turnip, or bean.</p>
</div>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the usage and the behavior of the disable() method. Here, all the tabs are disabled and thus switching tabs is not possible.