In this post, we will learn how to create vertical tabs in HTML. Tabs are very helpful if we want to show data about different topics. Tabs are best suited for single page web applications. If you want to create horizontal tabs then read this post : How To Create Horizontal Tabs in HTML?

How To Create Vertical Tabs in HTML ?

Create Vertical Tabs in HTML

To create vertical tabs in html, we follow the following simple steps:

Step 1 : In this step, we write the HTML code. First we create buttons for tabs inside the div which class name is tabs. Then create contents for these tabs and give it class named tabcontent. When we click on these tabs then these contents are appeared. 

<!DOCTYPE html>
<title>How To Create Horizontal Tabs in HTML ?</title>
<style>/* CSS code here....*/</style>

<div class="tabs">
<button class="tablink" id="defaultOpen" onclick="openCity(event, 'London')">London</button>
<button class="tablink" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</button>

<div id="London" class="tabcontent">
<p>London is the capital city of England.</p>

<div id="Paris" class="tabcontent">
<p>Paris is the capital of France.</p>

<div id="Tokyo" class="tabcontent">
<p>Tokyo is the capital of Japan.</p>

</html> code-box

Step 2 : In this step, we write the CSS code. Style tabs and tabcontent classes and also style buttons for tabs.

/* Universal selector */
* {box-sizing: border-box}

/* Style tabs */
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
float: left;
width: 30%;
height: 300px;

/* Style tabs button */
.tabs button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;

/* Change background color of buttons on hover */
.tabs button:hover {
background-color: #ddd;

/* Create an active tablink class */
.tabs {
background-color: #ccc;

/* Style tab content */
.tabcontent {
float: left;
width: 70%;
padding: 0px 12px;
border: 1px solid #ccc;
height: 300px;
} code-box

Step 3 : In this step, we write the JavaScript code as follows:

function openCity(event, cityName) {
// Declare all variables
var i, tabcontent, tablinks;

// 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";

// Get all elements with class="tablink" and remove the class "active"
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
event.currentTarget.className += " active";

// Get the element with id="defaultOpen" and click on it


In this post we learn how to create vertical tabs in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post