HTML

  
    <div class="container">
      <button id="tab-1">Tab 1</button>
      <button id="tab-2">Tab 2</button>
      <button id="tab-3">Tab 3</button>
      <section>
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At enim sunt consectetur? Suscipit sunt numquam necessitatibus optio similique magnam eius id adipisci dolor beatae, perspiciatis nulla veritatis! Possimus, vero ipsam?</p>
      </section>
      <section hidden="">
        <h2>Tab 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur nemo fuga labore pariatur suscipit mollitia ea doloribus repellat voluptas numquam eveniet doloremque commodi, ab vel aut sint dignissimos repellendus placeat!</p>
      </section>
      <section hidden="">
        <h2>Tab 3</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, adipisci! Suscipit, sequi cum modi eveniet accusantium veniam expedita laboriosam velit quo maxime explicabo minus nihil beatae est enim adipisci officia.</p>
      </section>
    </div>
    <script src="./script.js"></script>
  

JS

  
const [firstSection,
secondSection,
thirdSection] = document.querySelectorAll("section");
const tab1 = document.querySelector("#tab-1");
const tab2 = document.querySelector("#tab-2");
const tab3 = document.querySelector("#tab-3");

tab1.addEventListener("click", function() {
  firstSection.removeAttribute("hidden")
  secondSection.setAttribute("hidden", "")
  thirdSection.setAttribute("hidden","")
});

tab2.addEventListener("click", function() {
  firstSection.setAttribute("hidden", "")
  secondSection.removeAttribute("hidden")
  thirdSection.setAttribute("hidden","")
});

tab3.addEventListener("click", function() {
  firstSection.setAttribute("hidden", "")
  secondSection.setAttribute("hidden", "")
  thirdSection.removeAttribute("hidden")
});