Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a vertical tab menu with CSS and JavaScript?
In this article, we will discuss how to create a vertical tab menu with CSS and JavaScript.
Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user−friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive.
There are several types of tabs which can be created and used in various cases −
Horizontal tabs
Horizontal with Secondary Tabs
Frameless Horizontal Tabs
Vertical Tabs
Vertical Tabs with Second Tabs
Vertical tabs also divide the data but are arranged vertically instead. They share all the major characteristics of the horizontal tabs but have better scalability if the number of tabs is higher. Vertical tabs also provide an additional description compartment to summarize the tab’s content.
Steps to Create Tabs
Following are the steps to be followed to create tabs with CSS and JavaScript −
In the body, the tag creates the tab under the div tag which custom data attributes.
Create another div tag to store the content of the tab with the specified id.
Specified data attributes for each content tag to display only one tab of content at a time
Using JavaScript, we can display the content of the tab.
Example.html
In this part, we are building the page's body structure by constructing three buttons (Tab1, Tab2, and Tab3) in vertical direction and three div paragraphs. As you can see from the code below.
<!--HTML Code-->
<div class="tab">
<button class="tablinks" onclick="JavaScript:selectTab('tab1');">
Tab1
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab2');">
Tab2
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab3');">
Tab3
</button>
</div>
<div id="tab1" class="tabcontent">
<h3>TAB First</h3>
<p>Tutorialspoint Easy To learn</p>
</div>
<div id="tab2" class="tabcontent">
<h3>TAB Second</h3>
<p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Tab Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
</div>
Example.css
In this part, Style is added to the page. Styling the width and height of the button, as well as creating a hover effect and altering the background color of the button when you hover over it.
<style>
/*CSS*/
* {
box-sizing: border-box;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.tab button:hover{
background-color: rgb(18, 84, 198);
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 80%;
border-left: none;
height: 180px;
display: none;
text-align: center;
background-color: antiquewhite;
}
</style>
Example.js
In this part, we are constructing a function selectTab and passing tabindex as an argument, as well as adding the style display attribute, so that when you click on the button, the tab content appears on the page. As you can see from the code below.
<!-- Java script -->
<script>
function selectTab(tabIndex) {
// Declare all variables
var i, tabcontent;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
//Show the Selected Tab
document.getElementById(tabIndex).style.display = "block";
}
</script>
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab</title>
<style>
/*CSS*/
* {
box-sizing: border-box;
}
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 20%;
}
/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.tab button:hover{
background-color: rgb(18, 84, 198);
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 80%;
border-left: none;
height: 180px;
display: none;
text-align: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--HTML Code-->
<div class="tab">
<button class="tablinks" onclick="JavaScript:selectTab('tab1');">
Tab1
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab2');">
Tab2
</button>
<button class="tablinks" onclick="JavaScript:selectTab('tab3');">
Tab3
</button>
</div>
<div id="tab1" class="tabcontent">
<h3>TAB First</h3>
<p>Tutorialspoint Easy To learn</p>
</div>
<div id="tab2" class="tabcontent">
<h3>TAB Second</h3>
<p>Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Tab Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?</p>
</div>
<!-- Java script -->
<script>
function selectTab(tabIndex) {
// Declare all variables
var i, tabcontent;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
//Show the Selected Tab
document.getElementById(tabIndex).style.display = "block";
}
</script>
</body>
</html>
3K+ Views
