Reputation: 102
So, I have this basic tab module that is supposed to show its respective content once a button is clicked. I have managed to make it open and show content once clicked. However, the other ones stay open as well.
My question is: how do I make it so when one tab is clicked and open, the others hide?
const button = document.querySelectorAll('.tabButton');
button.forEach(function(btn) {
btn.addEventListener('click', tabClick, false);
})
function tabClick(event) {
let currentTab = document.querySelectorAll('.active');
currentTab.forEach(function(tab) {
tab.className = tab.className.replace('active' , '');
event.target.parentElement.className += ' active';
document.getElementById(event.target.href.split('#')[1]).classList.add('on');
})
};
<div class='tabsBox'>
<div class='tabButtons'>
<ul>
<li id='test' class='active'><a class='tabButton' href='#tab1'>Button 1</a></li>
<li ><a class='tabButton' href='#tab2'>Button 2</a></li>
<li ><a class='tabButton' href='#tab3'>Button 3</a></li>
</ul>
</div>
<div class='tabsContent'>
<div class='tabInner' active id='tab1'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit</p>
</div>
<div class='tabInner' active id='tab2'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit2</p>
</div>
<div class='tabInner' active id='tab3'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit3</p>
</div>
</div>
</div>
Upvotes: 3
Views: 365
Reputation: 11492
It appears as though you are using the CSS class .on
to apply styles so before you set that you could get all the tab content div
s using .tabInner
and remove the .on
class: document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));
Your question didn't have any styles included so my code is based on the assumption that the .on
class is handling display styles.
Below is a working snippet of what I think you are after. I modified parts of your JS code to use classList
consistently and swapped to arrow functions () => {}
.
const button = document.querySelectorAll('.tabButton');
button.forEach(btn => btn.addEventListener('click', tabClick, false));
function tabClick(event) {
const currentTab = document.querySelectorAll('.active');
currentTab.forEach(tab => {
tab.classList.remove('active');
event.target.parentElement.classList.add('active');
document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));
document.getElementById(event.target.href.split('#')[1]).classList.add('on');
})
};
.tabInner {
display: none;
}
.tabInner.on {
display: block;
}
<div class='tabsBox'>
<div class='tabButtons'>
<ul>
<li id='test' class='active'><a class='tabButton' href='#tab1'>Button 1</a></li>
<li><a class='tabButton' href='#tab2'>Button 2</a></li>
<li><a class='tabButton' href='#tab3'>Button 3</a></li>
</ul>
</div>
<div class='tabsContent'>
<div class='tabInner' active id='tab1'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit</p>
</div>
<div class='tabInner' active id='tab2'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit2</p>
</div>
<div class='tabInner' active id='tab3'>
<h2>Title</h2>
<p>Lorem ipsum dolor sit3</p>
</div>
</div>
</div>
Upvotes: 2