removal of active class from nav tabs

Question

Well, i tried to create a layout like instagram and faced the following problem. I hope i'll get help from experts in this regard. And i tried various ways to remove the active class after clicking on the nav tab, but everytime there arose a problem. let me know how can i remove the active class from this piece of javascript as attached below.

<div class="menu">
  <p data-target="#initial" class="active">Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div class="content">
  <div data-content id="initial" class="active">
    <div class="cards">
      <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    <div class="card">
      abc
    </div>
    </div>
  </div>
  <div data-content id="product">
    <div class="cards">
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
    <div class="card">
      lmn
    </div>
  </div>
  </div>
  <div data-content id="contact">
    <div class="cards">
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    <div class="card">
      xyz
    </div>
    </div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Sans-serif;
}
body{
  padding: 5%;
}
.menu{
  display:flex;
}
.menu p{
  margin-right: 2rem;
  cursor: pointer;
}
.content{
  margin-top:2rem;
}
[data-content]{
  display:none;
}
.active[data-content]{
  display:block;
}
.menu .active{
  text-transform:uppercase;
  color:#FFF;
  background: #000;
  padding:  5px 10px;
  margin-top: -5px;
  border-radius: 50px;
}
.menu p{
  text-transform:uppercase;
}
.cards{
  display:flex;
  flex:1;
  flex-basis: 33.33%;
  max-width: 33.33%;
  min-width: 33.33%;
  height: 100%;
  position: relative;
}
.card{
          border: 1px solid #ccc;
        background: #fff;
}

const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');

targets.forEach(target => {
  target.addEventListener('click',()=>{
   
    content.forEach(c => {
      c.classList.remove('active')
      
    })
    
    const t = document.querySelector(target.dataset.target)
    t.classList.add('active');
      target.classList.add('active');
  })
})

Answer 1

You can use classList.remove()

Example:

var element = document.getElementById("targetid");
  element.classList.remove("active");

More documentation

Answer 2

Your javascript code is almost working, but there are typos in contents instead content . That typo makes javascript returns an error and the code below doesn't be executed. And you can remove the active class from that tab by targets.forEach(...

 const targets = document.querySelectorAll('[data-target]'); const contents = document.querySelectorAll('[data-content]'); targets.forEach(target => { target.addEventListener('click',()=>{ targets.forEach(t => { t.classList.remove('active') }) contents.forEach(c => { c.classList.remove('active') }) const t = document.querySelector(target.dataset.target) t.classList.add('active'); target.classList.add('active'); }) })

 *{ margin:0; padding:0; box-sizing:border-box; font-family: Sans-serif; } body{ padding: 5%; }.menu{ display:flex; }.menu p{ margin-right: 2rem; cursor: pointer; }.content{ margin-top:2rem; } [data-content]{ display:none; }.active[data-content]{ display:block; }.menu.active{ text-transform:uppercase; color:#FFF; background: #000; padding: 5px 10px; margin-top: -5px; border-radius: 50px; }.menu p{ text-transform:uppercase; }.cards{ display:flex; flex:1; flex-basis: 33.33%; max-width: 33.33%; min-width: 33.33%; height: 100%; position: relative; }.card{ border: 1px solid #ccc; background: #fff; }

 <div class="menu"> <p data-target="#initial" class="active">Initial</p> <p data-target="#product">Product</p> <p data-target="#contact">Contact</p> </div> <div class="content"> <div data-content id="initial" class="active"> <div class="cards"> <div class="card"> abc </div> <div class="card"> abc </div> <div class="card"> abc </div> </div> </div> <div data-content id="product"> <div class="cards"> <div class="card"> lmn </div> <div class="card"> lmn </div> <div class="card"> lmn </div> </div> </div> <div data-content id="contact"> <div class="cards"> <div class="card"> xyz </div> <div class="card"> xyz </div> <div class="card"> xyz </div> </div> </div> </div>