CODEWITHSUNDEEP
javascript
Vikintas Raudavicius
Vikintas Raudavicius

Reputation: 102

How to remove other tabs when one is open

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

Answers (1)

Ash
Ash

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 divs 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

Related Questions