Easy Toggle Tab using only vanilla JavaScript with a simple UI.
A Pen by Fikri Al-baihaqi on CodePen.
<body> | |
<h1>TOGGLE TABS</h1> | |
<div class="wrapper"> | |
<div class="buttonWrapper"> | |
<button class="tab-button active" style="border-top-left-radius: 10px;" data-id="home">Home</button> | |
<button class="tab-button" data-id="about">About</button> | |
<button class="tab-button" style="border-top-right-radius: 10px;" data-id="contact">Contact</button> | |
</div> | |
<div class="contentWrapper"> | |
<p class="content active" id="home"> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam iste doloribus unde ullam doloremque eos autem ad nulla accusamus? Modi at minima numquam accusamus repudiandae perspiciatis nostrum architecto voluptatem quasi? | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia ratione corporis earum laudantium sapiente autem praesentium error neque illum adipisci modi ea, consectetur rerum pariatur laborum aperiam at commodi! Impedit. | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, quasi porro dolorum deleniti velit fuga perspiciatis veniam minus perferendis facere sit doloribus aliquid illum adipisci. Quam quasi maxime perferendis dolorem. | |
</p> | |
<p class="content" id="about"> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis maxime itaque veritatis iste soluta placeat obcaecati laudantium repellat corrupti! Eius sunt rerum inventore magnam? Perspiciatis facere error suscipit quisquam quibusdam. | |
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam, corporis voluptatem quo dignissimos eius quis perferendis vero culpa reiciendis nulla quisquam fugit minima sed molestiae excepturi beatae repudiandae ea? Aliquid! | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim sapiente officia vel consequuntur, hic at quis? Illo repellendus dolores totam facilis sunt sequi qui hic, nulla ratione harum porro perspiciatis. | |
</p> | |
<p class="content" id="contact"> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sit incidunt nostrum? Magni, quam vero, magnam odio similique ipsam minima et repellat rerum cupiditate totam in repudiandae. Sed, dicta corrupti? | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, dolore quas quis earum incidunt voluptas! Ducimus quod libero aliquid consequatur et modi porro officia, quibusdam quas commodi placeat maxime qui? | |
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab ea debitis eligendi accusamus deleniti maxime pariatur. Assumenda, facere placeat eius quam magni accusantium aut quae minima iure atque incidunt illum. | |
</p> | |
</div> | |
</div> | |
</body> | |
</html> |
const tabs = document.querySelector(".wrapper"); | |
const tabButton = document.querySelectorAll(".tab-button"); | |
const contents = document.querySelectorAll(".content"); | |
tabs.onclick = e => { | |
const id = e.target.dataset.id; | |
if (id) { | |
tabButton.forEach(btn => { | |
btn.classList.remove("active"); | |
}); | |
e.target.classList.add("active"); | |
contents.forEach(content => { | |
content.classList.remove("active"); | |
}); | |
const element = document.getElementById(id); | |
element.classList.add("active"); | |
} | |
} |
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap'); | |
body { | |
text-align: center; | |
font-family: 'Jost', sans-serif; | |
background-color: #f0f5ff; | |
} | |
h1 { | |
font-size: 48px; | |
color: #232c3d; | |
} | |
.wrapper { | |
width: 590px; | |
margin: auto; | |
background-color: white; | |
border-radius: 10px; | |
box-shadow: 0px 5px 15px rgba(0, 0, 0, .1); | |
} | |
.buttonWrapper { | |
display: grid; | |
grid-template-columns: 1fr 1fr 1fr; | |
} | |
button { | |
letter-spacing: 3px; | |
border: none; | |
padding: 10px; | |
background-color: #bccbe9; | |
color: #232c3d; | |
font-size: 18px; | |
cursor: pointer; | |
transition: 0.5s; | |
} | |
button:hover { | |
background-color: #d5e3ff; | |
} | |
button.active { | |
background-color: white; | |
} | |
.active { | |
background-color: white; | |
} | |
p { | |
text-align: left; | |
padding: 10px; | |
} | |
.content { | |
display: none; | |
padding: 10px 20px; | |
} | |
.content.active { | |
display: block; | |
} |
Easy Toggle Tab using only vanilla JavaScript with a simple UI.
A Pen by Fikri Al-baihaqi on CodePen.