tabs Project

Html

<article class="about">
  <div class="btn-container">
    <button class="tab-btn active" data-id="history">history</button>
    <button class="tab-btn" data-id="vision">vision</button>
    <button class="tab-btn" data-id="goals">goals</button>
  </div>
  <div class="about-content">
    <div class="content active" id="history">.....</div>
    <div class="content" id="vision">.....</div>
    <div class="content" id="goals">.....</div>
  </div>
</article>

CSS

.tab-btn{
  background:gray;
}
.content{
  display:none;
}
.active{
  display:block;
}

Javascript

const contents = document.querySelectorAll(".content");
const btns = document.querySelectorAll(".tab-btn");
const container = document.querySelector(".about")

container.addEventListener("click",(e)=>{
  const id = e.target.dataset.id;
  if(id){
    btns.forEach((btn)=>{
      btn.classList.remove("active")
    })
    e.target.classList.add("active")
    
    contents.forEach((content)=>{
      content.classList.remove("active")
    })
    const element = document.getElementById(id);
    element.classList.add("active")
  }
})