Tabs are used to create multiple sections on a webpage that can be swapped, much like an accordion. It helps to group content and to view content from a specific group at a time.
Tabs are created by following a specific markup which is as follows:
- Tabs should be enclosed inside an ordered list or an unordered list
- Each tab heading should be wrapped individually in a list item and an anchored tag enclosed with an href attribute specifying the content for each tab panel
- Each tab panel can be empty but it should have its own id corresponding to the hashed name entered in the anchor element of the associated tab.
The contents inside a tab panel can be defined on the same page or can be loaded through Ajax, both of them are handled by the href attribute associated with the anchor tag of that panel.
Below we write a code for a simple 4-panel tab using jquery UI.
The tabs are specified in a div tag with an id. The id of which is specified inside the jquery code. Here we have chosen the 2nd tab as the default tab which will be chosen when the webpage opens. You can change it by specifying a different value in the
active option.
Note: The tabs are indexed starting from "0".
Below examples illustrates the jQuery Tabs:
Example 1: This example code is a simple jquery tab, all the tabs are assessable.
- Program:
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#geeks").tabs({
active: 0
})
})
</script>
</body>
</html>
- Output:
Example 2: Keeping all tabs closed by default, you can also choose to keep all the tabs closed by default. To do this we use the
Collapsible option and set its value to "True" and set the value of
active option to false.
- Program:
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#geeks").tabs({
active: false,
collapsible: true
})
})
</script>
</body>
</html>
- Output:
Example 3: In this example we will disable the tabs. We can choose to disable specific tabs or all the tabs by using the
disable option. First, we disable all the tabs for which we set the value "True" for the disable option.
- Program:
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#geeks" ).tabs({
disabled:true
})
})
</script>
</body>
</html>
- Output:
Example 4: In this example we will disable some specific tabs. In the below code we disable the 1st and 3rd tab(0 nd 2nd in terms on indexing):
- Program:
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#geeks" ).tabs({
active: 1,
disabled:[0, 2]
})
})
</script>
</body>
</html>
- Output:
Example 5: We can choose which element to open by default, also by default mouse click event opens the tab, also we will change this to Mouse-hover to open or active that tab
- Program:
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#geeks" ).tabs({
event:'mouseover'
})
})
</script>
</body>
</html>
- Output:
Example 6: In this example we will change the tab page height depending on the content of that tab. To do that we will be required to define the min-height as short as you can define. And the overflow property that will increase the height of the tab page depending on the content.
Program:
-
html
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#geeks a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="geeks">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>GeeksforGeeks</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#geeks").tabs().css({
'min-height': '100px',
'overflow': 'auto'
});
})
</script>
</body>
</html>
- Output:
Similar Reads
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a perfect choice. This JavaScript
3 min read
jQuery UI | Menu
Menu widget in jQuery UI creates a menu that contains items and sub-items in a sub-menu related to a particular item on the menu. Menu items are created using mark-up elements using a parent-child like relation which can be created using lists and nested lists. Each menu item generally corresponds t
6 min read
jQuery UI Tabs load() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allows us to switch between them. In this article, we will s
2 min read
jQuery UI tabs show Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI tabs show option is used to display the panel animation. It accepts different types of values i.e. Boolean or Number or
1 min read
jQuery UI tabs hide Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI tabs hide option is used to display the animation effect to hide the tab content. It accepts the different type of valu
1 min read
jQuery UI Tabs create Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tabs widget is used to create a single content area with multiple panels that are associated with a header in a list. T
3 min read
jQuery UI Tabs event Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see
2 min read
jQuery UI Tabs widget() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see
1 min read
jQuery UI Tabs active Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article we will see
2 min read
jQuery UI Tabs option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tabs widget helps us to put some content in different tabs and allow us to switch between them. In this article, we will se
2 min read