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 Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing