How to Create Horizontal and Vertical Tabs using JavaScript ?
Last Updated :
18 Apr, 2025
In this article, we will create Horizontal and Vertical Tabs using JavaScript.
Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single-page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs and their content in paragraphs. The styling is performed using CSS. With the click of each tab button, the tabs display their respective content. This is done using JavaScript.
Horizontal Tabs: The following code demonstrates the simple HTML structure with tabs and its contents in the form of a paragraph. On click of each tab, it calls the displayContent() method implemented in the "script.js" file given below.
Example: The following example shows the creation of horizontal tabs.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks Horizontal tabs
</h2>
<!-- Link to each tab with onclick event -->
<div id="tabsDiv">
<button class="linkClass" onclick=
"displayContent(event, 'interview')">
Interview
</button>
<button class="linkClass" onclick=
"displayContent(event, 'practice')">
Practice
</button>
<button class="linkClass" onclick=
"displayContent(event, 'python')">
Python
</button>
<button class="linkClass" onclick=
"displayContent(event, 'algorithms')">
Algorithms
</button>
<button class="linkClass" onclick=
"displayContent(event, 'machine')">
Machine Learning
</button>
</div>
<!-- Content for each HTML tab -->
<div id="interview" class="contentClass">
<h3>Interview</h3>
<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 id="practice" class="contentClass">
<h3>Practice</h3>
<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="python" class="contentClass">
<h3>Python</h3>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python 3)
is being used in web development, Machine
Learning applications, along with all
cutting edge technology in Software Industry.
Python Programming Language is very well
suited for Beginners, also for experienced
programmers with other programming languages
like C++ and Java.
</p>
</div>
<div id="algorithms" class="contentClass">
<h3>Greedy Algorithms</h3>
<p>
Greedy is an algorithmic paradigm that
builds up a solution piece by piece,
always choosing the next piece that
offers the most obvious and immediate
benefit. So the problems where
choosing locally optimal also
leads to global solution are
best fit for Greedy.
</p>
</div>
<div id="machine" class="contentClass">
<h3>Machine Learning</h3>
<p>
Machine Learning is the field of
study that gives computers the capability
to learn without being explicitly
programmed. ML is one of the most
exciting technologies that one
would have ever come across.
As it is evident from the name,
it gives the computer that makes
it more similar to humans:
The ability to learn. Machine learning
is actively being used today,
perhaps in many more places than
one would expect.
</p>
</div>
</body>
</html>
h3 {
text-align: left;
}
/* Button to open the content */
.linkclass {
float: left;
cursor: pointer;
padding: 10px 15px 10px 10px;
background-color: light-grey;
}
/* Button styling on mouse hover */
#tabsDiv a:hover {
color: black;
background-color: #e9e9e9;
font-size: 16px;
}
/* Change the color of the button */
button.active {
background-color: #c0c0c0;
}
/* Content for button tabs*/
.contentClass {
display: none;
padding: 10px 16px;
border: 2px solid #c0c0c0;
}
function displayContent(event, contentNameID) {
let content =
document.getElementsByClassName("contentClass");
let totalCount = content.length;
// Loop through the content class
// and hide the tabs first
for (let count = 0;
count < totalCount; count++) {
content[count].style.display = "none";
}
let links =
document.getElementsByClassName("linkClass");
totalLinks = links.length;
// Loop through the links and
// remove the active class
for (let count = 0;
count < totalLinks; count++) {
links[count].classList.remove("active");
}
// Display the current tab
document.getElementById(contentNameID)
.style.display = "block";
// Add the active class to the current tab
event.currentTarget.classList.add("active");
}
Output:
Vertical Tabs: The tabs can be made vertical by changing the HTML structure and replacing the CSS stylesheet with a modified one used for the vertical tabs design. The following code demonstrates the vertical tabs.
Example: This example shows the creation of vertical tabs.
HTML
<body>
<h2 style="color:green">
GeeksforGeeks Vertical tabs
</h2>
<div id="tabsDiv">
<div id="interview" class="contentClass">
<h3>Interview</h3>
<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 id="practice" class="contentClass">
<h3>Practice</h3>
<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="python" class="contentClass">
<h3>Python</h3>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python 3)
is being used in web development, Machine
Learning applications, along with all
cutting edge technology in Software Industry.
Python Programming Language is very
well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
</div>
<div id="algorithms" class="contentClass">
<h3>Greedy Algorithms</h3>
<p>
Greedy is an algorithmic paradigm
that builds up a solution piece by
piece,always choosing the next piece
that offers the most obvious and
immediate benefit. So the problems
where choosing locally optimal also
leads to global solution are best
fit for Greedy.
</p>
</div>
<ul class="ulClass" style="height:300px">
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'interview')">
Interview
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'practice')">
Practice
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'python')">
Python
</button>
</li>
<li style="list-style-type:none;">
<button class="linkClass" onclick=
"displayContent(event, 'algorithms')">
Algorithms
</button>
</li>
</ul>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
#tabsDiv {
height: 300px;
border: 2px solid #c0c0c0;
}
#tabsDiv ul {
height: 300px;
padding: 0px 5px;
}
#tabsDiv li {
width: 15%;
height: 60px;
}
#tabsDiv button {
float: left;
border: 1px solid #c0c0c0;
background-color: #f1f0f4;
}
/* Button to open the content */
#tabsDiv button {
display: block;
background-color: inherit;
color: black;
padding: 25px 15px;
width: 100%;
text-align: left;
cursor: pointer;
}
/* Button styling on mouse hover */
#tabsDiv button:hover {
background-color: #d1d1d1;
color: lime;
}
#tabsDiv button.active {
background-color: #c0c0c0;
}
/* Content for tabs*/
.contentClass {
display: none;
position: absolute;
left: 18%;
padding: 0px 15px;
width: 70%;
border-style: none;
height: 300px;
}
function displayContent(event, contentNameID) {
let content =
document.getElementsByClassName("contentClass");
let totalCount = content.length;
// Loop through the content class
// and hide the tabs first
for (let count = 0;
count < totalCount; count++) {
content[count].style.display = "none";
}
let links =
document.getElementsByClassName("linkClass");
totalLinks = links.length;
// Loop through the links and
// remove the active class
for (let count = 0;
count < totalLinks; count++) {
links[count].classList.remove("active");
}
// Display the current tab
document.getElementById(contentNameID)
.style.display = "block";
// Add the active class to the current tab
event.currentTarget.classList.add("active");
}
Output:
Similar Reads
How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi
2 min read
How to Create Full-Page Tabs using CSS & JavaScript? Tabs are a common UI pattern used to organize content into multiple sections within a single page. In this article, we'll explore how to create full-page tabs using CSS and JavaScript. Full-page tabs allow users to switch between different sections of content while maintaining a clean and intuitive
3 min read
How to Change Tabs Horizontally on Hover with Tailwind CSS and JavaScript ? Changing tabs on hover in Tailwind CSS enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore different sections and increase engagement. We can also add CSS transitions for visua
3 min read
How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff
4 min read
How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that
15+ min read
How to Build Accordion Menu using JavaScript ? Accordion is used to render or hide, or toggle the view of the content with the help of adding the collapsible effect. It helps to manage and organize information in a compact and visually appealing manner. Accordion Menu may contain nested accordions, in order to render a large volume of content in
4 min read
How to create Horizontal selects controlgroups using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Horizontal selects controlgroups button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project
1 min read
How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody
1 min read
How to make a horizontal controlgroup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a horizontal controlgroups using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="
2 min read
How to create a tabbed pills and vertical pills navigation menu in Bootstrap ? In this article, we will learn about tabbed pills and the vertical pills navigation menu in Bootstrap, & will understand their implementation through the examples. These kinds of navigation menus are used to decorate the navbar in a different fashion with a specific distinct navigation style to
4 min read