Accordion anpassen

[Matthias Scharwies]

Servus!

ich brauche bitte Eure Hilfe. Ich möchte ein Accordion entwerfen, das den ersten Reiter grundsätzlich beim Laden offen hat.

Im Wiki gibt es einen Ansatz mit dem Checkbox-Hack, der nur mit CSS funktioniert:

• CSS/Anwendung_und_Praxis/Akkordeon

---

JavaScript

Heydon Pickering verwendet in diesem Beispiel anstelle von Klassen zugängliche ARIA-Zustände.

Die Buttons werden von Dir mit Klassen verändert, das würde ich auch mit den Panels machen. Hier die Version mit den aria-Zuständen:

[aria-hidden="true"] {
    height: 0;
}
 
[aria-hidden="false"] {
    height: 100%;
}

Sobald man einen neuen Reiter anklickt, soll dieser geöffnet werden und der bisher geöffnete geschlossen werden. Bei meinem Code sind alle Reiter geschlossen und es können beliebig viele Reiter geöffnet werden. Wie kann ich das ändern?

Pickerings Beispiel funktioniert wie Deins. Wenn Du alle anderen schließen willst, durchlaufe mit jedem Klick eine Schleife, die alle Panels auf aria-hidden="false" setzt und dann das geklickte auf aria-hidden="true".

target.nextElementSibling.setAttribute("aria-hidden","true");

Herzliche Grüße

Matthias Scharwies