Vysvětlení kodu Accordion – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj, popsal by mi trošku někdo znalý tento kod: je to klasická rozbalovací webová harmonika, proč tu použili for

Děkuji za pomoc...

<script>
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";
    }
  });
}
</script>
 

Protože to dělá pro všechny prvky.

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener...

var acc = document.getElementsByClassName("accordion");
get-Elements!-By-Class-Name
acc = [element, element, element]

for (i = 0; i < acc.length; i++)
element =  acc[I]

acc[i].addEventListener("click", function()
element.addEventListener("click", funkceX);

---

function funkceX()
{
this.classList.toggle("active");  // element.addEventListener("click", funkceX); // this = element, kde byla pozice mysi, kdyz nastala event udalost (stisk klavesy, mys tlacitka, pohyb mysi)
    var panel = this.nextElementSibling; // googlem
}

google = nextElementSibling
https://developer.mozilla.org/…ementSibling
Jestli to spravne chapu, tak to da dalsi element ve stromu na stejnem levelu zanoreni.
Nevim, co predstavuje pojem webova harmonika, ale ten kod by mohl zobrazit 1 dalsi div pod divem, na ktery jsi klikl.
Cili, kdyz mas strukturu 

<div class=accordion>tlacitko</div>
<div><ul class=list_links><li><li><li></ul></div>
<div class=accordion>tlacitko</div>
<div><ul class=list_links><li><li><li></ul></div>

tak by to melo vzdy sbalit a rozbalit menu.

Misto getElementsByClassName se da pouzivas nove querySelector('.accordion')