Para que cada uno abra su propio contenido. Hacer un identificador individual es una mala idea, hay 1000 botones de este tipo
<button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">1</h1> <button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">2</h1> <button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">3</h1> <style> .hide{ display:none; } </style> let userSection = document.querySelector(".toggle__elements"); let isShow = true function showHide(){ isShow=!isShow userSection.classList.toggle("hide", isShow); }Debe usar window.event , desde dentro del controlador de eventos, para capturar el evento activado y obtener su propiedad de destino para que el elemento active el evento.
Una vez que tenga el botón en el que se hizo clic, puede usar una estrategia como obtener su próximo hermano como lo hice aquí en esta demostración, y alternar la clase oculta.
function showHide(){ const elementClicked = window.event.target; const elementNextToClickedOne = elementClicked.nextElementSibling; elementNextToClickedOne.classList.toggle("hide"); } .toggle__button{ cursor: pointer; } .hide{ display:none; } <button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">1</h1> <button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">2</h1> <button onclick="showHide()" class="toggle__button">click</button> <h1 class="toggle__elements hide">3</h1>He actualizado su función para que funcione de forma independiente para cada botón. Los comentarios dentro del fragmento deben proporcionar información sobre cómo se logra esto. Lo más notable aquí es que podemos usar this en onclick="showHide(this)" para pasar la instancia de nuestro elemento de botón a la función showHide . Lo que nos permite seleccionar el elemento hermano correcto y alternar su clase hide .
function showHide(button){ const userSection = button.nextSibling.nextElementSibling; // Select the next sibling of the clicked button userSection.classList.toggle("hide"); } <button onclick="showHide(this)" class="toggle__button">click</button> <h1 class="toggle__elements hide">1</h1> <button onclick="showHide(this)" class="toggle__button">click</button> <h1 class="toggle__elements hide">2</h1> <button onclick="showHide(this)" class="toggle__button">click</button> <h1 class="toggle__elements hide">3</h1> <style> .hide{ display:none; } </style>