Hola chicos tengo este script para hacer un acordeón. Estoy en las primeras experiencias de js, por lo que pido ayuda aquí. Lo que no puedo entender es por qué cuando hago clic en la misma etiqueta de "Título", el ícono no cambia a la posición +. Supongo que al js le falta una función en sí mismo. Gracias a todos por cualquier ayuda.
var acc = document.getElementsByClassName("accordion-mio"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { var pannello = this.nextElementSibling; if (pannello.style.maxHeight){ pannello.style.maxHeight = null; } else { let attivo = document.querySelectorAll(".accordion-mio.attivo"); for(let j = 0; j < attivo.length; j++){ attivo[j].classList.remove("attivo"); attivo[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("attivo"); pannello.style.maxHeight = pannello.scrollHeight + "px"; } }); } /* Style the buttons that are used to open and close the accordion panel */ .accordion-mio { background-color: #F2F2F2; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; border-bottom:1px #ABABAB solid; } .attivo, .accordion-mio:hover { background-color: #ccc; } .accordion-mio:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #444; float: right; margin-left: 5px; } .attivo:after { content: '\2796'; /* Unicode character for "minus" sign (-) */ color: #fff; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ /* Style the accordion panel. Note: hidden by default */ .pannello { padding: 0 18px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .elenco {margin-top:20px;} <div class="accordion-mio">Titolo</div> <div class="pannello"><div class="elenco">testo testo testo</div></div> <div class="accordion-mio">Titolo</div> <div class="pannello"><div class="elenco">testo testo testo</div></div>