Hi guys I have this script to make an accordion. I am at the first experiences of js, so I ask for help here. What I can't understand is why when I click on the same "Title" label the icon - doesn't change to the + position. I guess the js is missing a function of itself. Thanks everyone for any help.
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>