Vertical tabs are a great way to display multiple sections of content within a single webpage without cluttering the interface. They allow users to navigate between different sections efficiently. This approach is beneficial for dashboards, settings pages, or any web application where multiple categories need to be presented in a compact and accessible manner.
In this guide, we’ll explore how to create vertical tabs in HTML using CSS and JavaScript with a new color scheme. Additionally, we will provide tips for making the design more dynamic and accessible.
How to Create Vertical Tabs in HTML
Step 1: Add HTML Structure
First, let’s create the basic HTML structure for our vertical tab component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Tabs Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'Services')">Services</button>
<button class="tablinks" onclick="openTab(event, 'Contact')">Contact</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Welcome to our homepage. Here you will find the latest updates and highlights.</p>
</div>
<div id="Services" class="tabcontent">
<h3>Services</h3>
<p>We offer various web development services, including front-end, back-end, and full-stack solutions.</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get in touch with us for more details. Our support team is available 24/7.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Learn more about our mission and vision for creating innovative web solutions.</p>
</div>
<script src="script.js"></script>
</body>
</html>
HTML Explanation
This HTML code creates a simple vertical tabbed interface. Here’s a breakdown of each section:
The <!DOCTYPE html> declaration defines the document as an HTML5 document. The <html lang="en"> tag indicates that the content is in English.
In the <head> section, the character encoding is set to UTF-8 using the <meta charset="UTF-8"> tag, ensuring that all characters are correctly displayed. The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag is used for responsive design, ensuring the page scales properly on different devices. The title of the page is set to “Vertical Tabs Example” with the <title> tag. Finally, the link tag references an external CSS file (styles.css) that provides the styling for the page.
In the <body>, there’s a div with the class "tab", which contains four buttons. Each button has the class "tablinks" and an onclick event that calls the openTab function (defined in the external JavaScript file script.js) when clicked. The onclick event also passes an event object and the ID of the corresponding tab content (such as 'Home', 'Services', etc.).
Each of the div elements with the class "tabcontent" represents the content for a tab. Each one has a unique id (like "Home", "Services", etc.) that matches the IDs passed in the openTab function. Inside each tabcontent div, there is a header (<h3>) and a paragraph (<p>) describing the content for that tab. These content sections are initially hidden and will only be displayed when the corresponding tab button is clicked.
The external script.js file is included at the bottom of the <body> to handle the tab-switching logic and other interactivity when the user clicks on a tab. This separation of HTML, CSS, and JavaScript ensures the code is well-organized and maintainable.
Step 2: Add CSS Styles
Now, let’s add CSS to style the vertical tabs and make them visually appealing. We’ll include animations and an improved hover effect for better user experience.
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Style the tab container */
.tab {
float: left;
border: 1px solid #007BFF;
background-color: #f8f9fa;
width: 25%;
height: 400px;
padding: 10px;
}
/* Style the tab buttons */
.tab button {
display: block;
background-color: inherit;
color: #007BFF;
padding: 18px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
font-size: 18px;
}
/* Change button background on hover */
.tab button:hover {
background-color: #cce5ff;
color: #0056b3;
}
/* Active tab button style */
.tab button.active {
background-color: #007BFF;
color: white;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 20px;
border: 1px solid #007BFF;
width: 70%;
border-left: none;
height: 400px;
display: none;
animation: fadeEffect 0.5s;
}
/* Fade-in animation */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
CSS Explanation
The CSS styles are used to design a tab-based navigation system, where the content and buttons for each tab are styled for a clean, interactive experience.
The universal selector * applies two properties to all elements on the page. box-sizing: border-box; ensures that padding and borders are included in the element’s total width and height, making layout easier to manage. font-family: Arial, sans-serif; sets a clean, sans-serif font for the entire page.
The .tab class styles the tab container. The container is floated to the left and given a solid border with a blue color (#007BFF) and a light background color (#f8f9fa). It has a fixed height of 400px and a width of 25%, which leaves space for the content to be displayed on the right. Padding is added for spacing inside the container.
The .tab button styles the individual tab buttons within the container. These buttons are displayed as block elements and inherit the background color from the parent .tab. The text color is set to blue (#007BFF), and padding is added for visual spacing. The buttons have a full width (width: 100%), no borders, and no outline when focused. The text-align: left; aligns the text to the left of each button. A smooth color transition effect is applied on hover (transition: background-color 0.3s, color 0.3s;), and the font size is increased to 18px for better readability.
On hovering over a tab button, the .tab button:hover selector changes the button’s background color to light blue (#cce5ff) and the text color to a darker shade of blue (#0056b3), providing a visual cue to the user.
The .tab button.active class styles the active tab button, changing its background to blue (#007BFF) and the text color to white. This visually highlights the currently active tab.
The .tabcontent class styles the content area of each tab. Like the .tab container, the content is floated left, with padding around the content. It has a width of 70% and a fixed height of 400px, and the left border is removed to create a seamless transition between the tab and its content. By default, the content is hidden (display: none;) and will only be shown when the tab is selected. An animation (fadeEffect 0.5s) is applied to the content, creating a fade-in effect when it becomes visible.
Finally, the @keyframes fadeEffect defines the fade-in animation. It starts with an opacity of 0 and gradually increases to 1, making the content appear smoothly when a tab is clicked.
Step 3: Add JavaScript Functionality
Finally, let’s add JavaScript to handle tab switching functionality dynamically and ensure accessibility compliance.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// Hide all tab contents
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove active class from all tab buttons
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Display the selected tab and add active class to the button
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Automatically open the first tab on page load
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".tab button").click();
});
JavaScript Explanation
The openTab function is designed to handle the logic for switching between different tabs in a tabbed interface. When a tab button is clicked, this function is triggered. The function first gathers all elements with the class name "tabcontent", which represent the content associated with each tab. Then, it hides all of these elements by setting their display style to "none". This ensures that no tab content is visible initially.
Next, the function removes the "active" class from all tab buttons. It collects all buttons using the class name "tablinks" and iterates through them. By using className.replace(" active", ""), it removes the "active" class from each button, so no button is highlighted as active at the beginning.
Once the previous steps are complete, the function displays the content of the clicked tab by accessing the element with the tabName (an ID passed to the function) and changing its display style to "block". This makes the selected tab’s content visible. It then adds the "active" class to the clicked button, marking it as the currently active tab.
The second part of the code ensures that the first tab is automatically opened when the page is loaded. By using the DOMContentLoaded event listener, the script waits for the HTML document to be fully loaded. Once it is, it simulates a click on the first tab button (document.querySelector(".tab button").click()), which triggers the openTab function to display the first tab’s content. This guarantees that the user sees content immediately without needing to manually click the first tab.
Summary
In this guide, we covered how to create vertical tabs in HTML with CSS and JavaScript. We expanded the design with animations, an improved color scheme, and an additional “About” tab. The implementation ensures a smooth user experience with JavaScript-driven tab switching, and we included accessibility best practices for improved usability.
To further enhance your tabs, consider adding icons, tooltips, or even integrating a responsive design for mobile users. Now, try implementing this in your project and modify it to suit your needs!
How to Create a Multi Step Form: 3 Easy Steps