Beispiel

In den obigen Abbildungen können Sie sehen, wie ein HTML Akkordeon aufgebaut ist. Der Standardtitel wird angezeigt aber wenn Sie auf ihn drücken werden weitere Informationen angezeigt.

Code abschnitt

Der folgende Codeabschnitt zeigt wie der Java-Skriptcode aufgebaut ist:

        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.maxHeight) {
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          } 
        });
        }
      

Referenz:

https://www.w3schools.com/howto/howto_js_accordion.asp