How to create tabs with CSS and JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss how to create tabs with CSS and JavaScript.

Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user-friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive.

There are several types of tabs which can be created and used in various cases −

Horizontal tabs
Horizontal with Secondary Tabs
Frameless Horizontal Tabs
Vertical Tabs
Vertical Tabs with Second Tabs

Steps to Create Tabs

Following are the steps to be followed to create tabs with CSS and JavaScript −

In the body, the tag creates the tab under the div tag which custom data attributes.
Create another div tag to store the content of the tab with the specified id.
Specified data attributes for each content tag to display only one tab of content at a time
Using JavaScript, we can display the content of the tab.

Example.html

In the HTML script, we are building the page's body structure by constructing three div buttons (Tab1, Tab2, and Tab3) and three div paragraphs, as you can see from the code below

<!-- HTML Of the Tab -->
   <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
   <div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
   <div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
   <br />
   <div id="tab1Content">This is first tab.</div>
   <div id="tab2Content">This is Second tab</div>
   <div id="tab3Content">This is third tab</div>

Example.css

Using CSS, Style is being added to the page. Styling the width and height of the page, as well as creating a hover effect and altering the background color of the button when you hover over it.

<!-- style of the tab-->
   <style>
      #tab1,
      #tab2,
      #tab3 {
         text-align: center;
         float: left;
         padding: 5px 10px 5px 10px;
         background: #b00098;
         color: #ffffff;
         margin: 0px 5px 0px 5px;
         cursor: pointer;
         border-radius: 5px;
      }
      #tab1:hover,
      #tab2:hover,
      #tab3:hover {
         background: #ecade4;
      }
      #tab1Content,
      #tab2Content,
      #tab3Content {
         width: auto;
         height: 100px;
         padding: 20px;
         border: 1px solid #b00098;
         border-radius: 10px;
      }
      #tab1Content,
      #tab2Content,
      #tab3Content {
         display: none;
      }
   </style>

Example.js

Using JavaScript, we are constructing a function selectTab and passing tabindex as an argument, as well as adding the style display attribute, so that when you click on the button, the tab content appears on the page. Let us see that in the code below.

<!-- Javascript Code of the tab -->
   <script>
     function selectTab(tabIndex) {
       //Hide All Tabs
       document.getElementById("tab1Content").style.display = "none";
       document.getElementById("tab2Content").style.display = "none";
       document.getElementById("tab3Content").style.display = "none";
       //Show the Selected Tab
       document.getElementById("tab" + tabIndex + "Content").style.display =
       "block";
     }
   </script>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Tab using javascript</title>
   <!-- style of the tab-->
   <style>
      #tab1,
      #tab2,
      #tab3 {
         text-align: center;
         float: left;
         padding: 5px 10px 5px 10px;
         background: #b00098;
         color: #ffffff;
         margin: 0px 5px 0px 5px;
         cursor: pointer;
         border-radius: 5px;
      }
      #tab1:hover,
      #tab2:hover,
      #tab3:hover {
         background: #ecade4;
      }
      #tab1Content,
      #tab2Content,
      #tab3Content {
         width: auto;
         height: 100px;
         padding: 20px;
         border: 1px solid #b00098;
         border-radius: 10px;
      }
      #tab1Content,
      #tab2Content,
      #tab3Content {
         display: none;
      }
   </style>
</head>
<body>
   <!-- HTML Of the Tab -->
   <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
   <div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
   <div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
   <br />
   <div id="tab1Content">This is first tab.</div>
   <div id="tab2Content">This is Second tab</div>
   <div id="tab3Content">This is third tab</div>
   <!-- Javascript Code of the tab -->
   <script>
      function selectTab(tabIndex) {
         //Hide All Tabs
         document.getElementById("tab1Content").style.display = "none";
         document.getElementById("tab2Content").style.display = "none";
         document.getElementById("tab3Content").style.display = "none";
         //Show the Selected Tab
         document.getElementById("tab" + tabIndex + "Content").style.display =
         "block";
      }
   </script>
</body>
</html>