In this post, we will learn how to create horizontal 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. 


How To Create Horizontal Tabs in HTML ?


Create Horizontal Tabs in HTML

To create horizontal 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>
<html>
<head>
<title>How To Create Horizontal Tabs in HTML ?</title>
<style>/* CSS code here....*/</style>
</head>
<body>

<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>

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

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

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


<script></script>
</body>
</html> code-box

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

/* Style tabs */
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* 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 button.active {
background-color: #ccc;
}

/* Style tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
/* For fade effect*/
animation: fadeEffect 1s;
}

/* For fadeEffect*/
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
} 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
document.getElementById("defaultOpen").click();
code-box

Summary

In this post we learn how to create horizontal 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