How to Create Horizontal and Vertical Tabs using JavaScript?

Javascript Web Development Front End Technology

We can create tabs using HTML, CSS & JavaScript. There can be two types of tabs. One is horizontal tabs, and another is vertical tabs. The tabs allow us to show different contents in very less space as we can show the different content according to the different tabs.

We will learn to create horizontal and vertical tabs from scratch using HTML, CSS, and JavaScript.

Create horizontal tabs

We can show all tabs in a single row by creating horizontal tabs. Also, we can show the content of the selected tab below all tabs.

Syntax

Users can follow the syntax below to manage horizontal tabs using JavaScript.

for (let i = 0; i < childs.length; i++) {
   childs[i].addEventListener('click', () => {
      // hide all content divs and remove the active class from all tab
      // After that, add the active class to clicked tab and show the content of the clicked tab
      currentElement = childs[i].classList[0];
      element = document.getElementById(currentElement);
      element.style.display = "block";
      childs[i].classList.add("active");
   })
}

In the above syntax, we accessed all tabs and added a click event to all tabs by iterating through the HTML collection of all tabs. We activate the clicked tab and show its content in the addEventListner() method.

Algorithm

Step 1 − Access all the tabs in JavaScript.
Step 2 − Use the for loop to iterate through all tabs and add a click event using the addEventListner() method.
Step 3 − In the callback function of the addEventListner() method, first use another for loop to iterate through all children and hide them. Also, remove the active class from all tabs.
Step 4 − The class of the tab is the same as the id of its content div element. So, we can get the first class of the clicked tab and use that as an id to get content div.
Step 5 − After that, change the display of the content div to show it on the screen, and add the active class to the class list of the clicked tab.

Example

In the example below, we created the horizontal tabs by applying CSS. Also, we have used JavaScript, as explained in the above algorithm, to manage the clicked tab content.

In the output, users can observe that only one tab remains active.

<html>
<head>
   <style>
      .tabs {
         display: flex;
         flex-direction: row;
         cursor: pointer;
      }
   
      .tabs div {
         padding: 5px 15px;
         font-size: 1.2rem;
         border: 1px solid blue;
      }

      .active {
         background-color: grey;
      }
   
      .tab-content {
         margin-top: 10px;
         border: 3px solid blue;
         width: 400px;
         font-size: 2rem;
         border-radius: 12px;
         height: 5rem;
         display: flex;
         justify-content: center;
         align-items: center;
      }
   
      .tab-content div {
         display: none;
      }
   </style>
</head>
<body>
   <h2> Creating the horizontal tabs using <i> HTML, CSS, and JavaScript. </i> </h2>
   <!-- creating tabs -->
   <div class = "tabs" id = "tabs">
      <div class = "1 tab"> Tab 1 </div>
      <div class = "2 tab"> Tab 2 </div>
      <div class = "3 tab"> Tab 3 </div>
      <div class = "4 tab"> Tab 4 </div>
   </div>
   <!-- content of different tabs -->
   <div class = "tab-content">
      <div id = "1"> This is the content of the tab 1. </div>
      <div id = "2"> This is the content of the tab 2. </div>
      <div id = "3"> This is the content of the tab 3. </div>
      <div id = "4"> This is the content of the tab 4. </div>
   </div>
</body>
<script>
   let tabs = document.getElementById('tabs');
   let childs = tabs.children;
   var currentElement = "1";
   let element = null;
   
   // iterate through all children (tabs)
   for (let i = 0; i < childs.length; i++) {
      // adding click event to every element
      childs[i].addEventListener('click', () => {
            for (let j = 0; j < childs.length; j++) {
            currentElement = childs[j].classList[0];
            element = document.getElementById(currentElement);
            
            // hide content of all div elements
            element.style.display = "none";
            
            // remove the active class from all tab
            childs[j].classList.remove("active");
         }
         // show the content of ith div
         currentElement = childs[i].classList[0];
         element = document.getElementById(currentElement);
         element.style.display = "block";
         
         // add the active class to the ith tab.
         childs[i].classList.add("active");
      })
   }
</script>
</html>

Create the vertical tabs

We can show all tabs in a single column by creating vertical tabs. Also, we can show the tabs and their content side by side.

Syntax

Users can follow the syntax below to convert the horizontal tabs into vertical tabs.

// show tabs and their content side by side
   .container {
      display: flex;
      flex-direction: row;      
   }
// show tabs vertically
   .tabs {
      display: flex;
      flex-direction: column;
   }

In the above syntax, we used CSS to create vertical tabs from horizontal ones. The container is the main div in which tabs and their content are located, and the ‘tabs’ contains all tabs.

Example 2

The example below is almost similar to the first example. We just changed the CSS to show all the vertically and the content and tabs side by side.

<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         width: 700px;
      }
   
      .tabs {
         display: flex;
         flex-direction: column;
         cursor: pointer;
      }
   
      .tabs div {
         padding: 5px 15px;
         font-size: 1.2rem;
         border: 1px solid blue;
      }
   
      .active {
         background-color: grey;
      }
   
      .tab-content {
         margin-top: 10px;
         border: 3px solid green;
         width: 400px;
         font-size: 2rem;
         border-radius: 12px;
         margin-left: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
      }
   
      .tab-content div {
         display: none;
      }
   </style>
</head>
<body>
   <h2> Creating the vertical tabs using <i> HTML, CSS, and JavaScript. </i> </h2>

   <div class="container">
      <div class = "tabs" id = "tabs">
         <div class = "1 tab"> React JS </div>
         <div class = "2 tab"> Node JS </div>
         <div class = "3 tab"> JavaScript </div>
         <div class = "4 tab"> TypeScript </div>
      </div>
      <div class = "tab-content">
         <div id = "1"> It is a JavaScript library for the front end. </div>
         <div id = "2"> It is a run-time environment used to create a backend of the application. </div>
         <div id = "3"> It is used for the front end and back end of the application. </div>
         <div id = "4"> It is a superset of JavaScript in which we can also define the types of variables. </div>
      </div>
   </div>
</body>
   <script>
      let tabs = document.getElementById('tabs');
      let childs = tabs.children;
      var currentElement = "1";
      let element = null;
      for (let i = 0; i < childs.length; i++) {
         childs[i].addEventListener('click', () => {
               for (let j = 0; j < childs.length; j++) {
               currentElement = childs[j].classList[0];
               element = document.getElementById(currentElement);
               element.style.display = "none";
               childs[j].classList.remove("active");
            }
            currentElement = childs[i].classList[0];
            element = document.getElementById(currentElement);
            element.style.display = "block";
            childs[i].classList.add("active");
         })
      }
   </script>
</html>