Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create tabs with CSS and JavaScript?
In this article, we are going to discuss how to create tabs 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
How Tabs Work
The basic concept behind tabs is to show only one content section at a time while hiding others. When a user clicks on a tab, JavaScript shows the corresponding content and hides all other tab contents. This creates a seamless navigation experience without page reloads.
Steps to Create Tabs
Following are the steps to create tabs with CSS and JavaScript:
Create clickable tab buttons using div elements with onClick handlers
Create corresponding content containers for each tab with unique IDs
Use CSS to style the tabs and initially hide all content sections
Write JavaScript function to show selected content and hide others
HTML Structure
In the HTML, we create three tab buttons and their corresponding content sections:
<!-- Tab Buttons --> <div id="tab1" onClick="selectTab(1);">Tab 1</div> <div id="tab2" onClick="selectTab(2);">Tab 2</div> <div id="tab3" onClick="selectTab(3);">Tab 3</div> <!-- Tab Contents --> <div id="tab1Content">This is first tab content.</div> <div id="tab2Content">This is second tab content.</div> <div id="tab3Content">This is third tab content.</div>
CSS Styling
CSS is used to style the tab buttons with hover effects and initially hide all content sections:
<style>
/* Tab button styling */
#tab1, #tab2, #tab3 {
text-align: center;
float: left;
padding: 10px 20px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 0px;
cursor: pointer;
border-radius: 5px;
}
/* Hover effect */
#tab1:hover, #tab2:hover, #tab3:hover {
background: #ecade4;
}
/* Content area styling */
#tab1Content, #tab2Content, #tab3Content {
clear: both;
width: 400px;
height: 100px;
padding: 20px;
border: 2px solid #b00098;
border-radius: 10px;
margin-top: 10px;
display: none; /* Initially hidden */
}
</style>
JavaScript Functionality
The JavaScript function handles tab switching by hiding all content and showing only the selected one:
<script>
function selectTab(tabIndex) {
// Hide all tab contents
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
// Show selected tab content
document.getElementById("tab" + tabIndex + "Content").style.display = "block";
}
// Show first tab by default
window.onload = function() {
selectTab(1);
};
</script>
Complete Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Tabs Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
/* Tab buttons */
#tab1, #tab2, #tab3 {
text-align: center;
float: left;
padding: 10px 20px;
background: #b00098;
color: #ffffff;
margin: 0px 5px 0px 0px;
cursor: pointer;
border-radius: 5px;
border: none;
}
/* Hover effects */
#tab1:hover, #tab2:hover, #tab3:hover {
background: #ecade4;
}
/* Active tab styling */
.active-tab {
background: #333 !important;
}
/* Content areas */
#tab1Content, #tab2Content, #tab3Content {
clear: both;
width: 400px;
min-height: 100px;
padding: 20px;
border: 2px solid #b00098;
border-radius: 10px;
margin-top: 10px;
display: none;
background: #f9f9f9;
}
</style>
</head>
<body>
<h1>JavaScript Tabs Demo</h1>
<!-- Tab buttons -->
<div id="tab1" onclick="selectTab(1)">Home</div>
<div id="tab2" onclick="selectTab(2)">About</div>
<div id="tab3" onclick="selectTab(3)">Contact</div>
<!-- Tab contents -->
<div id="tab1Content">
<h3>Welcome to Home</h3>
<p>This is the home page content. Here you can find general information about our website.</p>
</div>
<div id="tab2Content">
<h3>About Us</h3>
<p>Learn more about our company, mission, and values. We strive to provide the best user experience.</p>
</div>
<div id="tab3Content">
<h3>Contact Information</h3>
<p>Get in touch with us through email, phone, or visit our office. We're here to help!</p>
</div>
<script>
function selectTab(tabIndex) {
// Remove active class from all tabs
document.getElementById("tab1").classList.remove("active-tab");
document.getElementById("tab2").classList.remove("active-tab");
document.getElementById("tab3").classList.remove("active-tab");
// Hide all content sections
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3Content").style.display = "none";
// Show selected content and highlight tab
document.getElementById("tab" + tabIndex + "Content").style.display = "block";
document.getElementById("tab" + tabIndex).classList.add("active-tab");
}
// Initialize with first tab active
window.onload = function() {
selectTab(1);
};
</script>
</body>
</html>
Key Features
Dynamic Content Switching: Only one tab's content is visible at a time
Visual Feedback: Active tab has different styling to show current selection
Hover Effects: Tabs change appearance when user hovers over them
No Page Reload: Content switches instantly using JavaScript
Conclusion
Creating tabs with CSS and JavaScript provides an efficient way to organize content without cluttering the interface. The combination of HTML structure, CSS styling, and JavaScript functionality creates an interactive user experience that's both functional and visually appealing.
6K+ Views
