Tabs organize content into distinct sections, allowing users to switch between them with tabbed navigation for efficient information access.
<div class="c-tabs">
<div class="c-tabs__navigation">
<button class="c-tabs__trigger is-active">One</button>
<button class="c-tabs__trigger">Two</button>
<button class="c-tabs__trigger">Three</button>
</div>
<div class="c-tabs__item">
<div class="c-tabs__description">
Item One Description
</div>
</div>
<div class="c-tabs__item">
<div class="c-tabs__description">
Item Two Description
</div>
</div>
<div class="c-tabs__item">
<div class="c-tabs__description">
Item Three Description
</div>
</div>
</div>
.c-tabs__navigation {
display: flex;
align-items: center;
column-gap: 5px;
margin-bottom: 10px;
}
.c-tabs__trigger {
padding: 10px 15px;
border-radius: 5px;
border: 1px solid #33aef7;
background-color: transparent;
color: #ffffff;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
}
.c-tabs__trigger:hover {
background-color: #33aef7;
color: #12161e;
}
.c-tabs__trigger.is-active {
background-color: #33aef7;
color: #12161e;
}
.c-tabs__item {
padding: 20px;
border: 1px solid #ffffff;
border-radius: 5px;
display: none;
}
.c-tabs__item.is-active {
display: block;
}
.c-tabs {
&__navigation {
display: flex;
align-items: center;
column-gap: 5px;
margin-bottom: 10px;
}
&__trigger {
padding: 10px 15px;
border-radius: 5px;
border: 1px solid #33aef7;;
background-color: transparent;
color: #ffffff;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #33aef7;;
color: #12161e;
}
&.is-active {
background-color: #33aef7;
color: #12161e;
}
}
&__item {
padding: 20px;
border: 1px solid #ffffff;
border-radius: 5px;
display: none;
&.is-active {
display: block;
}
}
}
const tabs = document.querySelectorAll('.c-tabs__item');
const tabTriggers = document.querySelectorAll('.c-tabs__trigger');
const tabsArray = [];
const triggersArray = [];
const removeActiveTabs = () => {
tabs.forEach((tab) => {
tab.classList.remove('is-active');
});
}
const removeActiveTriggers = () => {
tabTriggers.forEach((trigger) => {
trigger.classList.remove('is-active');
});
}
tabs.forEach((tab) => {
tabsArray.push(tab);
tabsArray[0].classList.add('is-active');
});
tabTriggers.forEach((trigger, index) => {
triggersArray.push(trigger);
trigger.addEventListener('click', () => {
removeActiveTabs();
removeActiveTriggers();
trigger.classList.add('is-active');
tabsArray[index].classList.add('is-active');
});
});