How to Create Vertical tabs in HTML. The Vertical Tabs element works as a container to show groups of content, sorted into tabs. Each tab label should compare with a block of related content. Only one tab’s contents are visible at any given time.
This element differs from the regular ‘tabs’ element, with the tabs organized on the left in a vertical space, instead of on the top in a horizontal space.
So, let’s begin.
How to Create Vertical tabs in HTML
HTML Code:
<h2>Vertical Tabs</h2>
<div class="softtab">
<button class="tabcodeon" onclick="openCity(event, 'Pakistan')" id="defaultOpen">Pakistan</button>
<button class="tabcodeon" onclick="openCity(event, 'Islamabad')">Islamabad</button>
<button class="tabcodeon" onclick="openCity(event, 'Punjab')">Punjab</button>
<button class="tabcodeon" onclick="openCity(event, 'Faislabad')">Faislabad</button>
</div>
<div id="Pakistan" class="softtabcontent">
<h3>Pakistan</h3>
<p>Pakistan, officially the Islamic Republic of Pakistan, is a country in South Asia. It is the world's fifth-most populous country with a population exceeding 212.2 million. By area, it is the 33rd-largest country, spanning 881,913 square kilometres.</p>
</div>
<div id="Islamabad" class="softtabcontent">
<h3>Islamabad</h3>
<p>Islamabad is the capital city of Pakistan, and is federally administered as part of the Islamabad Capital Territory. Islamabad is the ninth largest city in Pakistan, while the larger Islamabad-Rawalpindi metropolitan area is the country's fourth largest with a population of about 7.4 million.</p>
</div>
<div id="Punjab" class="softtabcontent">
<h3>Punjab</h3>
<p>Punjab is Pakistan's most populous province, with an estimated population of 110,012,442 as of 2017. Forming the bulk of the transnational Punjab region, it is bordered by the Pakistani provinces of Sindh, Balochistan, and Khyber Pakhtunkhwa, the enclave of Islamabad, and Azad Kashmir.</p>
</div>
<div id="Faislabad" class="softtabcontent">
<h3>Faislabad</h3>
<p>Faisalabad, formerly known as Lyallpur, is the third-most-populous city in Pakistan, and the second-largest in the eastern province of Punjab. Historically one of the first planned cities within British India, it has long since developed into a cosmopolitan metropolis.</p>
</div>CSS Code:
Read Also: How to Create Pagination using HTML and CSS
<style>
body {font-family: Arial;}
.softtab {
overflow: hidden;
border: 1px solid #fff;
background-color: #ab1d72;
}
.softtab button {
background-color: inherit;
float: left;
color:white;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.softtab button:hover {
background-color: #5d1c80;
}
h2{
text-align:center;
}
.softtabcontent {
display: none;
background:black;
color:#fff;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>Javascript Code:
Read Also: How to Create a fixed Social Media Sidebar
<script>
function openCity(evt, cityName) {
var i, softtabcontent, tabcodeon;
softtabcontent = document.getElementsByClassName("softtabcontent");
for (i = 0; i < softtabcontent.length; i++) {
softtabcontent[i].style.display = "none";
}
tabcodeon = document.getElementsByClassName("tabcodeon");
for (i = 0; i < tabcodeon.length; i++) {
tabcodeon[i].className = tabcodeon[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>In this tutorial, we’ve to design Vertical Tabs by using HTML, CSS, and a bit of Javascript.
Have a nice day.