Use bucles forEach simples junto con classList.toggle(className: string, force: boolean) :

 const content = document.querySelectorAll('.content'); const contentClose = document.querySelector('.close-content'); const btnsOpenContent = document.querySelectorAll('.show-content'); btnsOpenContent.forEach((btn, index) => { btn.addEventListener('click', () => { content.forEach((cnt, idx) => cnt.classList.toggle('show-modal', idx === index)) }) })

Sugiero encarecidamente delegar , lo que significa que, en lugar de agregar un oyente a todos y cada uno de los botones, en su lugar se aprovecha el mecanismo burbujeante de los eventos, escuchando los clics en lugar de un solo elemento antecesor común de todos los botones. Luego, dentro del controlador de clics, implementa un protector que verifica si el clic realmente proviene de un botón.

Tenga en cuenta que agregué oculto a los dos últimos contenidos para comenzar con el contenido 1

También puede agregar activo al botón en el que se hizo clic y eliminarlo de los hermanos

NOTA: Este código no cambia sin importar cuántos botones, siempre que haya un número coincidente de divs de contenido.

También tenga en cuenta que no es necesario que una clase se muestre y se oculte

Por último, tenga en cuenta que también implementé su cierre

 const nav = document.getElementById("nav"); const contents = document.getElementById("contents"); const buttons = nav.querySelectorAll("#nav .show-content"); const contentDivs = contents.querySelectorAll("div.content") nav.addEventListener("click", e => { const tgt = e.target; // what was clicked? if (!tgt.matches(".show-content")) return; // not a button buttons.forEach((but,i) => contentDivs[i].hidden = but !== tgt); // hide if not the content that belongs to button }) contents.addEventListener("click", e => { const tgt = e.target; if (!tgt.matches(".close")) return; // not a button tgt.closest("div").hidden = true; // hide the div the close button is in })

 <div id="nav"> <button class="show-content">Show 1</button> <button class="show-content">Show 2</button> <button class="show-content">Show 3</button> </div> <div id="contents"> <div class="content">Content 1 <button class="close">X</button></div> <div class="content" hidden>Content 2 <button class="close">X</button></div> <div class="content" hidden>Content 3 <button class="close">X</button></div> </div>

Lo más importante a tener en cuenta es que querySelectorAll no devuelve una matriz, sino una lista de nodos. ES6 ha introducido un método útil diseñado para este propósito exacto NodeList.prototype.forEach() .

Según mi experiencia, el enfoque más fácil para crear contenido con pestañas es agregar algún tipo de identificador para cada pestaña ".content" en el botón que activa el evento. el atributo "datos" se usa a menudo para esto, sin embargo, hay varias otras opciones.

Un ejemplo de su botón html usando el atributo de datos se vería así:

 <button class="show-content" data-content="content1">Show content 1</button> <button class="show-content" data-content="content2">Show content 2</button> <button class="show-content" data-content="content3">Show content 3</button>

Para esta técnica, su contenido HTML necesitaría una identificación que coincida con el identificador utilizado en sus botones:

 <div class="content" id="content1">Some content for 1</div> <div class="content" id="content2">Some content for 2</div> <div class="content" id="content3">Some content for 3</div>

Y el javascript correspondiente sería similar al siguiente:

 const btnsOpenContent = document.querySelectorAll('.show-content'); btnsOpenContent.forEach((button) => { button.addEventListener('click', (event) => { let contentId = event.target.getAttribute('data-content'); let targetContent = document.getElementById(contentId); // Hide all contents document.querySelectorAll('content').forEach((element) => { element.classList.remove('show-modal'); }) // Show selected content targetContent.classList.add('show-modal'); }); });

Este código puede incluso acortarse:

 const btnsOpenContent = document.querySelectorAll('.show-content'); btnsOpenContent.forEach((button) => { button.addEventListener('click', (event) => { let contentId = event.target.dataset.content; let targetContent = document.getElementById(contentId); document.querySelectorAll('content').forEach((element) => { element.classList.toggle('show-modal', contentId === element.id); }) }); });