I need a tabs program using HTML, CSS & JavaScript for codepen
Here is the codepen code for tabs using HTML, CSS & Java Script,
You can replace the name, color, font size, etc.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<h1>Assignmment By Naga Nithin</h1>
</head>
<body>
<div class="container">
<div class="tabs">
<h3 class="active">Option 1</h3>
<h3>Option 2</h3>
<h3>Option 3</h3>
</div>
<div class="tab-content">
<div class="active">
<h4>Here You have the content for option 1</h4>
<p>
Qui ipsorum lingua Celtae, nostra Galli appellantur. Quam diu
etiam furor iste tuus nos eludet? Morbi fringilla convallis sapien,
id pulvinar odio volutpat.
Donec sed odio opera, eu vulputate felis rhoncus. Ut enim ad
minim veniam, quis nostrud exercitation. Fictum, deserunt mollit
anim laborum astutumque! Hi omnes lingua, institutis, legibus
</p>
</div>
<div>
<h4>Here You have the content for option 2</h4>
<p>
Qui ipsorum lingua Celtae, nostra Galli appellantur. Quam diu
etiam furor iste tuus nos eludet? Morbi fringilla convallis sapien,
id pulvinar odio volutpat.
Donec sed odio opera, eu vulputate felis rhoncus. Ut enim ad
minim veniam, quis nostrud exercitation. Fictum, deserunt mollit
anim laborum astutumque! Hi omnes lingua, institutis, legibus
</p>
</div>
<div>
<h4>Here You have the content for option 3</h4>
<p>
Qui ipsorum lingua Celtae, nostra Galli appellantur. Quam diu
etiam furor iste tuus nos eludet? Morbi fringilla convallis sapien,
id pulvinar odio volutpat.
Donec sed odio opera, eu vulputate felis rhoncus. Ut enim ad
minim veniam, quis nostrud exercitation. Fictum, deserunt mollit
anim laborum astutumque! Hi omnes lingua, institutis, legibus
</p>
</div>
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS Code
h1{
text-align: center;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #fffff;
}
.container {
width: 280vmin;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 120px;
background-color: #ffffff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
h3 {
background-color: #e4e9fd;
text-align: center;
padding: 15px 0;
cursor: pointer;
font-weight: 600;
}
.tab-content {
background-color: #ffffff;
padding: 50px 40px;
}
.tab-content h4 {
font-size: 28px;
margin-bottom: 20px;
color: #000224;
font-weight: 600;
}
.tab-content p {
text-align: justify;
line-height: 1.9;
letter-spacing: 0.4px;
color: #202238;
}
.tab-content div {
display: none;
}
.tab-content .active {
display: block;
}
.tabs .active {
background-color: #ffffff;
color: #4d5bf9;
}
JavaScript Code
let tabs = document.querySelectorAll(".tabs h3");
let tabContents = document.querySelectorAll(".tab-content div");
tabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
tabContents.forEach((content) => {
content.classList.remove("active");
});
tabs.forEach((tab) => {
tab.classList.remove("active");
});
tabContents[index].classList.add("active");
tabs[index].classList.add("active");
});
});
Thanks for raising the topic in MWC Forum.
Thank you so much! How can I create a link for my codepen project and share it with others?
Once you pasted the code in respective editors, Click on Save Button. And the URL in your browser is your project link, Copy that link and now you can share that link with others.
Can you explain the code?
HTML Code:
The HTML consists of a div with a class called container. Inside the container, we have two divs with class – tabs and tab-content respectively. The tabs div comprises three h3 tags. One of these h3 tags has a class active.
The tab content consists of three div. Each of these divs has a h4 tag and a p tag. Even one of these tabs has an active class.
CSS Code:
We start by removing paddings and margins from all the elements. Next, we set the background color to #4d5bf9. We use transforms to center the container.
We use a grid layout to position out the tabs. Initially, we set the display of all the div’s inside tab-content. We use active class to set the content of tabs to back to block display. We add and remove this active class using javascript.
Javascript Code:
For the final step, we add functionality to these tabs with javascript.
We first select the h3 elements inside tabs and div elements inside the tab-content. We assign them to two different variables. In the next step, we add a click event listener to each of these tabs. When a tab is clicked on, an active class is added to the corresponding tab content. At the same time, the active class is removed from any other tab content it was applied to. So by default Option 1 tab has an active state, When we click on Option tab 2 the active class will be added to the Option 2 tab and it removes the active class from Option 1 and vice-versa. This is the usage of the ForEach loop in js code.
Still, if you have any queries related to this code, You can ask questions here.