I've created some clickable tabs but for some reason the tab content does not display on click. I can't see anything out of place with my code. Any ideas would be greatly appreciated. Thanks.
<div className="container-tabs">
<ul className="tablist">
<li data-tab-target="engage" className="active-tab tab">01</li>
<li data-tab-target="scope" className="tab">02</li>
<li data-tab-target="build" className="tab">03</li>
</ul>
<div className="tab-content py">
<div id="engage" data-tab-content className="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum
quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus
voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum
in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>
</div>
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContents => {
tabContents.classList.remove('active-tab')
})
tabs.forEach(tab => {
tab.classList.remove('active-tab')
})
tab.classList.add('active-tab')
target.classList.add('active-tab')
})
});
you can keep a variable with the selected tab, and go from there, also it's better to have only one listener on your tablist, i would set an id to <ul class="tablist"> for faster select.. something like this:
const tabs = document.getElementById("tablist");
let selected = document.querySelectorAll("[data-tab-target]")[0];
const tabContents = document.querySelectorAll("[data-tab-content]");
let selectedContent = tabContents[0];
tabs.addEventListener("click", (e) => {
selected.classList.remove("active-tab");
selected = e.target;
selected.classList.toggle("active-tab");
const index = [...selected.parentNode.children].indexOf(selected);
selectedContent.classList.remove("active-tab");
selectedContent = tabContents[index];
selectedContent.classList.toggle("active-tab");
});.active-tab {
color: red;
}<div class="container-tabs">
<ul class="tablist" id="tablist">
<li data-tab-target="engage" class="active-tab tab">01</li>
<li data-tab-target="scope" class="tab">02</li>
<li data-tab-target="build" class="tab">03</li>
</ul>
<div class="tab-content py">
<div id="engage" data-tab-content class="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>