Estoy tratando de crear la sección de preguntas frecuentes del sitio web de mi empresa. Las preguntas frecuentes utilizan un menú desplegable para cada pregunta -> cuando se hace clic en "+", se muestra la respuesta y eso cambia a "-". Cuando cierro la pregunta, espero que "-" se convierta en "+", pero no lo hace hasta que hago clic en una pregunta diferente, que cambia.
Aquí está mi código:
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { let active = document.querySelectorAll(".accordion-div .accordion.active"); for(let j = 0; j < active.length; j++){ active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight + "px"; } }); } .accordion { cursor: pointer; background-color:#ffffff; color: #082f55; padding-left: 10px; padding-top: 18px; padding-right: 18px; padding-bottom: 0px; width: 100%; font-weight: bold; border: none; text-align: left; outline: none; transition: all 0.5s; } .accordion:hover { color: #b0cb1f; } .accordion:after { content: "\02795"; font-size: 13px; float: right; margin-left: 5px; } .active:after{ content: "\2796"; } .panel { width: 100%; margin-right: auto; margin-left: auto; max-height: 0; transition: max-height 0.5s; overflow: hidden; } .answer{ margin-top: 10px; padding-left: 30px; padding-right: 50px; } .horLine{ margin-top: 18px; border-bottom: 1px groove; }¿Alguien puede ayudar?
Es un poco complicado resolver esto sin el HTML, pero creo que debería usar toggleClass() de jQuery en lugar de toggle() . Intenta reescribir esta línea con alternar:
this.classList.toggle("activo");
dentro de esto:
this.classList.toggleClass("activo");
.toggleClass() cambiará entre clases como desee, y .toggle() es para alternar entre .hide() y .show() para el elemento seleccionado.