Hola chicos, necesito una ayuda.
Tengo el siguiente código que hace que cuando el usuario quiera se muestre un texto o se oculte, pero también quiere que cambie la imagen, cuando no está el texto la imagen tiene unas flechas hacia abajo y cuando está el texto tiene unas flechas hacia arriba. Si que consigo que aparezca el texto cuando yo quiero pero quiero cambiar la imagen y no consigo ver cómo hacerlo.
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
Y el código Javascript que tengo
window.onload = function(){
mostrar();
}
function mostrar(){
var items, show , imagenes;
show = false;
items = document.querySelectorAll(".pulsador");
imagenes = document.querySelectorAll(".flecha");
for ( var i = 0 ; i < items.length ; i++){
items[i].addEventListener("click",aparecer);
}
function aparecer(){
if (show == false){
this.nextElementSibling.style.display = "block";
show = true;
}else{
this.nextElementSibling.style.display = "none";
show = false;
}
}
}