Updated April 6, 2023

Introduction to jQuery UI Tabs

jQuery UI Tabs() method can be used to create tab widgets, which serve for the purpose of displaying the contents in separate parts. The tabs are the purpose to logically group the set of content and flip between them. To define the tabs, the tabs should be within <ol> (ordered) or <ul> unordered list tag element. Each title of the tabs should be within <li> (list) and enclosed by <a> (anchor) tag elements and the id should be defined for each tab panel that corresponds to the in an anchor of an associated tab. The tabs() method change the appearance it lined up the content next to each other horizontally. All content sections are set to display:none except for the active panel. In all the tabs at a time, only one tab can be open.

Syntax and Parameters

There are two ways to use the tabs() method:

Syntax #1:

$(selector, context).tabs (options)

This is the first method which declares the specific HTML element it’s content as the tabs. The options parameter specifies an appearance and the behavior of the tabs. If the options are more than one, then this method can be used and each option should be separated by using the comma as below:

object. $(selector, context).tabs({opt1 : value1, opt2 : value2 ... });

Syntax #2:

$(selector, context).tabs ( "action", params )

This is the second method that declares an html element as a button and performs an action on that tabs. The action to be performed is passing as a string like disable, select, add, or remove the tab.

Parameters:

1. options: In the first method $(selector, context).button ( options), it accepts only one parameter that is an option. There are a list of possible values which we can use for the option are –

active: It specifies the currently active tab or panel. The default value of it is 0.
collapsible: It allows the active tab to be deselected when clicked and all content panels get hidden if set this option to TRUE. The default value of it is false.
Disabled: It specifies the tab to be disabled, it uses an array to indicate index tabs that are disabled, for example, array [0, 1] disable the first two tabs. The default value of it is false.
event: It specifies the event to trigger the tabs to display the content panel. The default value of it is “click”.
heightStyle: It specifies to control the height of the tabs and its panel. The default value of it is “content”.
hide: It specifies animation hiding of the panel. The default value of it is null.
show: It specifies the animation to show the panel. The default value of it is NULL.

2. action: In the second method $(selector, context).tabs ( “action”, params ), it accepts the two parameters, the action, and params. The action parameter specifics the action to be performed on that button. The possible values for the action are –

destroy: It is used to destroy or remove the functionality of the tabs element and return to the original state. It doesn’t accept any parameters.
disable: It is used to disable the functionality of all tabs. It doesn’t accept any parameters.
disable(index): It is used to disable the functionality of the particular tab, which specified by the index.
add: It is used to add a new tab.
select: It is used to activate a tab.
remove: It is used to remove a tab.
length: It is used to get the number of tabs in the widget.
enable: It is used to enable the functionality of all tabs. It doesn’t accept any parameters.
enable(index): It is used to enable the functionality of the particular tab, which specified by the index.
load(index): It is used to reload the content of the particular tab, which specified by the index.
option(optName): It is used to get the value of the specified option as optName which is a string.
option: It is used to get a current object containing key-value pairs.
option(optName, value): It is uses to set tab option of the passing optName.
option(Options): It is used to set one or multiple tabs options in the form of option-value pairs map.
url: It is used to alter the URL of the remote tab.
rotate: It is used to make the tab widget to cycle through the tabs.
abort: It is used to abort all active Ajax requests.
widget: It is used to get an object which contains the tab element. It doesn’t accept any parameters.

Examples of the jQuery UI tabs()

Next, we write the html code to understand the jQuery tabs() method more clearly with the following example, where the tabs() method used to create the tabs without passing any parameters to it, as below –

Example #1

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for tabs() method</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>
<style>
#t1{font-size: 18px;}
.ui-widget-header {
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#t1" ).tabs();
});
</script>
</head>
<body>
<div id="t1">
<h4>The benefits of the fruits:</h4>
<ul>
<li><a href="#t2">Oranges</a></li>
<li><a href="#t3">Strawberries</a></li>
<li><a href="#t4">Blackberries</a></li>
</ul>
<div id="t2">
<p>Oranges are a sweet, round citrus fruit packed with vitamins and minerals.</p>
</div>
<div id="t3">
<p>Strawberries are a juicy, red fruit with a high water content. It contains many healthful vitamins and minerals.</p>
</div>
<div id="t4">
<p>The blackberries contain health-boosting anthocyanins.</p>
</div>
</div>
</body>
</html>

Output:

Next, we write the html code to understand the jQuery tabs() method where the tabs() method uses options like hide, heightStyle, active and collapsible, as below –

Example #2

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for tabs() method</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>
<style>
#t1{font-size: 18px;}
.ui-widget-header {
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#t1").tabs({
heightStyle:"fill",
hide:"slideUp",
active : 1,
collapsible:true,
event:"mouseover"
});
});
</script>
</head>
<body>
<div id="t1">
<h4>The benefits of the fruits:</h4>
<ul>
<li><a href="#t2">Oranges</a></li>
<li><a href="#t3">Strawberries</a></li>
<li><a href="#t4">Blackberries</a></li>
</ul>
<div id="t2">
<p>Oranges are a sweet, round citrus fruit packed with vitamins and minerals.</p>
</div>
<div id="t3">
<p>Strawberries are a juicy, red fruit with a high water content. It contains many healthful vitamins and minerals.</p>
</div>
<div id="t4">
<p>The blackberries contain health-boosting anthocyanins.</p>
</div>
</div>
</body>
</html>

Output:

Next, we write the html code to understand the jQuery tabs() method where the tabs() method uses actions like disable and destroy, as below –

Example #3

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is an example for tabs() method</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>
<style>
#t1{font-size: 18px;}
.ui-widget-header {
background:lightred;
color: lightyblue;
border: 1px solid #b9cd6d;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#t1").tabs({
heightStyle:"fill",
hide:"slideUp"
});
$("#t1").tabs("disable", 1);
$("#dtabs").click(function() {
$("#t1").tabs("destroy");
});
});
</script>
</head>
<body>
<div id="t1">
<h4>The benefits of the fruits:</h4>
<ul>
<li><a href="#t2">Oranges</a></li>
<li><a href="#t3">Strawberries</a></li>
<li><a href="#t4">Blackberries</a></li>
</ul>
<div id="t2">
<p>Oranges are a sweet, round citrus fruit packed with vitamins and minerals.</p>
</div>
<div id="t3">
<p>Strawberries are a juicy, red fruit with a high water content. It contains many healthful vitamins and minerals.</p>
</div>
<div id="t4">
<p>The blackberries contain health-boosting anthocyanins.</p>
</div>
</div>
<button type="button" id="dtabs">Destroy all tabs</button>
</body>
</html>

Output:

When we click on the “Destroy all tabs” button, the output is:’

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to jQuery UI Tabs

Syntax and Parameters

Examples of the jQuery UI tabs()

Example #1

Example #2

Example #3

Recommended Articles

Follow us!

APPS

Blog

Courses

Email