Puedes navegar el DOM desde el botón hacia el hermano anterior, usando la propiedad previousSibling
.
De esta manera obtienes el <div>
anterior en la estructura y expandes unicamente ese.
Algo así: (fíjate que uso this.previousSibling
lo cual selecciona únicamente el hermano anterior del botón sobre el que haces click)
const expandButton = document.querySelectorAll('.expand-button');
expandButton.addEventListener('click', ()=> {
const more = this.previousSibling; // aqui se usaria
//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);
Ten en cuenta que esto funciona con la estructura HTML que pones en la pregunta, si cambias la estructura, sera necesario modifacar el codigo para navegar al elemento correcto.
Te recomiendo que leas sobre otras propiedades similares del objeto Node tales como nextSibling
, parentNode
, etc.
MAS..
Me acabo de dar cuenta que la forma en que estableces el listener no funcionara para todos los botones con la clase .expand-button
. Esto se debe a que querySelector toma únicamente el primer elemento que cumpla con la query.
Para asignar el handler a todos los botones deberas usar querySelectorAll y luego iterar sobre el resultado para asignar el manejador a todos los elementos.
Para ES2015:
var expandButtons = document.querySelectorAll('.expand-button');
Array.from(expandButtons).forEach(button => {
button.addEventListener('click', function(event) {
const more = this.previousSibling;
/// resto del código aquí.
});
});