Básicamente, estoy tratando de hacer que cuando haga clic en una pregunta, la flecha que tengo al lado de la pregunta gire 180 grados. En este momento, mi código no gira las flechas en absoluto. Cualquier ayuda sería apreciada.
Aquí está mi código javascript
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } var img = document.getElementsByClassName("arrow"); if (button.classList.contains(active)) { img.style.transform = "rotate(180deg)"; }Una gran razón por la que esto no funciona es que esta línea:
if (button.classList.contains(active)) { img.style.transform = "rotate(180deg)"; }
no está dentro de alguna función que active la flecha para girar. Se evalúa cuando se carga la página y luego no se vuelve a utilizar. Sin embargo, hay algunas formas de mejorar su código.
El uso de clases para afectar sus cambios de estilo le permite una mejor legibilidad, flexibilidad y reutilización. También opté por querySelectorAll en lugar de getElementsByClassname y usé un combo closest / querySelector para encontrar elementos adyacentes en lugar de nextElementSibling
document.querySelectorAll(".accordian").forEach(acc => { acc.addEventListener("click", e => { e.target.classList.toggle("active"); e.target.closest('.container').querySelector('.arrow').classList.toggle('active') e.target.closest('.container').querySelector('.content').classList.toggle('show') }); }); .arrow { transition: all .5s; display: inline-block; } .arrow.active { transform: rotate(90deg); } .content { display: none; } .show { display: block; } <div class='container'> <a class='accordian' href='#'>click me</a> <span class='arrow'>></span> <div class='content'>Show//Hide content</div> </div> <div class='container'> <a class='accordian' href='#'>click me</a> <span class='arrow'>></span> <div class='content'>Show//Hide content</div> </div>