How to create Tabs using HTML, CSS and Javascript.
Tabs are used to organize large sections of content on a page. In this tutorial I will show you how you can create tabs using HTML, CSS and Javascript.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="tabs">
<div class="tab-header">
<div class="active"> Code</div>
<div>About</div>
<div>Services</div>
<div>Contact</div>
</div>
<div class="tab-indicator"></div>
<div class="tab-body">
<div class="active">
<h2>This is the code section.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h2>This is the About section.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h2>This is the Services section.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h2>This is the Contact section.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
.tabs{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 250px;
background: #f5f5f5;
padding: 20px 30px;
overflow: hidden;
border-radius: 10px;
box-shadow: 5px 10px 5px #ccc;
}
.tabs .tab-header{
height: 40px;
display: flex;
align-items: center;
}
.tabs .tab-header>div{
width: calc(100%/4);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
outline: none;
}
.tabs .tab-header>div.active{
color: #00acee;
}
.tabs .tab-indicator{
position: relative;
width: calc(100%/4);
height: 5px;
background: #00acee;
left: 0px;
border-radius: 5px;
}
.tabs .tab-body{
position: relative;
height: cal(100%-60px);
padding: 10px 5px;
}
.tabs .tab-body>div{
position: absolute;
top: 200%;
opacity: 0;
margin-top: 5px;
transform: scale(0.9);
transition: opacity 500ms ease-in-out 0ms,
transform: 500ms ease-in-out 0ms;
}
.tabs .tab-body>div.active{
top: 0px;
opacity: 1;
transform: scale(1.0);
margin-top: 0px;
}JS
let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
let bodyTab = tabBody.getElementsByTagName("div");
for( let i=0;i<tabsPane.length;i++){
tabsPane[i].addEventListener("click",function(){
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabBody.getElementsByClassName("active")[0].classList.remove("active");
tabBody.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100%/4)*${i})`;
});
}
HTML
This gives the structure of the tabs where we have the header and body sections which are given using <div> elements with classes of tab-header and tab-body respectively.
The header section contains a list of the main content titles also wrapped in <div> elements.
The tab body contains content for each of the various sections represented in the header section.
I have also included a marker for indicating the section of the tabs being displayed. This marker is given a class of tab-indicator.
CSS
This adds styling to the tabs header, body and indicator.
Javascript
The getElementsByClassName() method is used to get the first element with classes of ‘tab-header‘,’tab-indicator‘ and ‘tab-body‘.
The getElementsByTagName() method is used to get the <div> elements in the tab header and tab body.
The for loop below is used to add or remove the ‘active’ class whenever a section in the tab header is clicked.
for( let i=0;i<tabsPane.length;i++){
tabsPane[i].addEventListener("click",function(){
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabBody.getElementsByClassName("active")[0].classList.remove("active");
tabBody.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100%/4)*${i})`;
});The ‘active’ class is also added or removed from the tab body in order to display only the content corresponding to the section of the header that has been clicked.
Output.
This is the code section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the About section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the Services section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is the Contact section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.