Loading, please wait...

A to Z Full Forms and Acronyms

Program to implement Vertical Tab.

Program to implement Vertical Tab using javascript in order to show the hidden data.

.tab {
    border: 1px solid #ccc;
    background-color: black;
    width: 100%;
    height: 190px;

.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;

.tab button:hover {
    background-color: orange;

.tabdata {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 619px;
    height: 100px;

<h1>Vertical Tab</h1>
<p>Click on the buttons to get the inside Data:</p>

<div class="tab">
  <button class="tabs" onclick="openTab(event, 'HTML')" id="defaultOpen">HTML</button>
  <button class="tabs" onclick="openTab(event, 'CSS')">CSS</button>
  <button class="tabs" onclick="openTab(event, 'JavaScript')">JavaScript</button>

<div id="HTML" class="tabdata">
  <p>HTML is used to define the content of web pages.</p>

<div id="CSS" class="tabdata">
  <p>CSS is used to specify the layout of web pages.</p> 

<div id="JavaScript" class="tabdata">
  <p>JavaScript is used to program the behavior of web pages.</p> 

function openTab(evt, language) {
    var i, tabdata, tabs;
    tabdata = document.getElementsByClassName("tabdata");
    for (i = 0; i < tabdata.length; i++) {
        tabdata[i].style.display = "none";
    tabs = document.getElementsByClassName("tabs");
    for (i = 0; i < tabs.length; i++) {
        tabs[i].className = tabs[i].className.replace(" active", "");
    document.getElementById(language).style.display = "block";
    evt.currentTarget.className += " active";

A to Z Full Forms and Acronyms

Related Article