Is there a better way of creating tabs using vanilla JavaScript than this?

I'm trying to create tabs within a webpage using HTML buttons and vanilla JavaScript. I've come up with this solution:

HTML

    <h1>Tabs</h1>        <div class="tabBtns">          <button id="tab-1" class="active">Tab 1</button>          <button id="tab-2">Tab 2</button>          <button id="tab-3">Tab 3</button>      </div>        <div class="content">          <div id="tab-1-content">              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos qui labore, quam dicta voluptate              libero est blanditiis perspiciatis voluptatibus perferendis velit repudiandae. Maxime, eligendi. Vitae              magnam similique harum sunt quibusdam.          </div>          <div id="tab-2-content" class="hide">              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores similique assumenda reprehenderit eaque              itaque in magni vero repudiandae, totam maiores saepe iste culpa labore quam esse ipsam fugit cupiditate              facilis sunt aliquid ad sit voluptatibus veritatis non. Eligendi accusantium libero veniam facere, expedita,              magnam quia assumenda similique quas, voluptatum nostrum.          </div>          <div id="tab-3-content" class="hide">              Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, sunt?          </div>      </div>  

JavaScript

const tab1 = document.getElementById("tab-1");  const tab2 = document.getElementById("tab-2");  const tab3 = document.getElementById("tab-3");  const tabs = [tab1, tab2, tab3];  const tab1Content = document.getElementById("tab-1-content");  const tab2Content = document.getElementById("tab-2-content");  const tab3Content = document.getElementById("tab-3-content");  const tabContents = [tab1Content, tab2Content, tab3Content];    tab1.addEventListener("click", () => {displayTab(tab1, tab1Content)});  tab2.addEventListener("click", () => {displayTab(tab2, tab2Content)});  tab3.addEventListener("click", () => {displayTab(tab3, tab3Content)});    function displayTab(tab, tabContent) {      for (let i = 0; i < tabs.length; i++) {          if (tabs[i].classList.contains("active")) {              tabs[i].classList.remove("active");              tabContents[i].classList.add("hide");          }      }      tab.classList.add("active");      tabContent.classList.remove("hide");  }  

Is there a more efficient way of doing this? It feels like it might be a little redundant having to manually add each tab and its content into their respective arrays, and then having to apply an event listener to each manually as well. I would appreciate a more elegant solution if one is possible.

https://stackoverflow.com/questions/66978996/is-there-a-better-way-of-creating-tabs-using-vanilla-javascript-than-this April 07, 2021 at 10:59AM