Para un evento toggle con puro javascript lo desarrollo de la siguiente forma:
Javascript
// Esta clase lo expande.
const expandButton = document.querySelector('.expand-button');
expandButton.addEventListener('click', ()=> {
//Esta es la clase que muestra el contenido.
const more = document.querySelector('.more');
//El contenido pasa de oculto a ser visible.
more.style.display = 'block';
//Oculto la imagen al expandir.
if (more.style.display === 'block') {
expandButton.style.display = 'none';
}
}, false);
HTML
<div class="more"> Contenido 1 </div> <!-- El contenido -->
<div class="expand-button">Expandir</div> <!-- Botón que expande -->
El problema está en que si tengo otro toogle con la misma clase
<div class="more"> Contenido 2 </div> <!-- El contenido -->
<div class="expand-button">Expandir</div> <!-- Botón que expande -->
Debería de recuperar los elementos con la clase expand-button con un for(), cuando lo hago, el botón expandir del segundo toggle abre al primero, y el primero realiza su función correctamente.
¿Alguna solución?