Create Tabs Using Html Css Javascript – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how we create Tabs. We use HTML, Css, and javascript for Tabs. I hope you enjoy our blog so let’s start with a basic HTML structure for the Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="section">
<div class="title">
<h2>about</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum,
aperiam!
</p>
</div>
<div class="about-center section-center">
<article class="about-img">
<img src="./hero-bcg.jpeg" alt="" />
</article>
<article class="about">
<!-- btn container -->
<div class="btn-container">
<button class="tab-btn active" data-id="history">history</button>
<button class="tab-btn" data-id="vision">vision</button>
<button class="tab-btn" data-id="goals">goals</button>
</div>
<div class="about-content">
<!-- single item -->
<div class="content active" id="history">
<h4>history</h4>
<p>
I'm baby wolf pickled schlitz try-hard normcore marfa man bun
mumblecore vice pop-up XOXO lomo kombucha glossier bicycle
rights. Umami kinfolk salvia jean shorts offal venmo. Knausgaard
tilde try-hard, woke fixie banjo man bun. Small batch tumeric
mustache tbh wayfarers 8-bit shaman chartreuse tacos. Viral
direct trade hoodie ugh chambray, craft beer pork belly flannel
tacos single-origin coffee art party migas plaid pop-up.
</p>
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="vision">
<h4>vision</h4>
<p>
Man bun PBR&B keytar copper mug prism, hell of helvetica. Synth
crucifix offal deep v hella biodiesel. Church-key listicle
polaroid put a bird on it chillwave palo santo enamel pin,
tattooed meggings franzen la croix cray. Retro yr aesthetic four
loko tbh helvetica air plant, neutra palo santo tofu mumblecore.
Hoodie bushwick pour-over jean shorts chartreuse shabby chic.
Roof party hammock master cleanse pop-up truffaut, bicycle
rights skateboard affogato readymade sustainable deep v
live-edge schlitz narwhal.
</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="goals">
<h4>goals</h4>
<p>
Chambray authentic truffaut, kickstarter brunch taxidermy vape
heirloom four dollar toast raclette shoreditch church-key.
Poutine etsy tote bag, cred fingerstache leggings cornhole
everyday carry blog gastropub. Brunch biodiesel sartorial mlkshk
swag, mixtape hashtag marfa readymade direct trade man braid
cold-pressed roof party. Small batch adaptogen coloring book
heirloom. Letterpress food truck hammock literally hell of wolf
beard adaptogen everyday carry. Dreamcatcher pitchfork yuccie,
banh mi salvia venmo photo booth quinoa chicharrones.
</p>
</div>
<!-- end of single item -->
</div>
</article>
</div>
</section>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
There is all the HTML code for the Tabs. Now, you can see an output with Tabs then we write javascript for Simple Tabs.
output
CSS code
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
About
===============
*/
.title {
text-align: center;
margin-bottom: 4rem;
}
.title p {
width: 80%;
margin: 0 auto;
}
.about-img {
margin-bottom: 2rem;
}
.about-img img {
border-radius: var(--radius);
object-fit: cover;
height: 20rem;
}
@media screen and (min-width: 992px) {
.about-img {
margin-bottom: 0;
}
.about-center {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
}
}
.about {
background: var(--clr-white);
border-radius: var(--radius);
display: grid;
grid-template-rows: auto 1fr;
}
.btn-container {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tab-btn:nth-child(1) {
border-top-left-radius: var(--radius);
}
.tab-btn:nth-child(3) {
border-top-right-radius: var(--radius);
}
.tab-btn {
padding: 1rem 0;
border: none;
text-transform: capitalize;
font-size: 1rem;
display: block;
background: var(--clr-grey-9);
cursor: pointer;
transition: var(--transition);
letter-spacing: var(--spacing);
}
.tab-btn:hover:not(.active) {
background: var(--clr-primary-10);
color: var(--clr-primary-5);
}
.about-content {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
padding: 2rem 1.5rem;
}
/* hide content */
.content {
display: none;
}
.tab-btn.active {
background: var(--clr-white);
}
.content.active {
display: block;
}
Css Updated output
Javascript Code
const about = document.querySelector(".about");
const btns = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".content");
about.addEventListener("click", function (e) {
const id = e.target.dataset.id;
if (id) {
// remove selected from other buttons
btns.forEach(function (btn) {
btn.classList.remove("active");
});
e.target.classList.add("active");
// hide other articles
articles.forEach(function (article) {
article.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
});
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Tabs. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
This post teaches us how to create Tabs using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Check out more…..
