Handorgel: das Vanilla-JS-Akkordeon in Contao

Mit Contao 5.2 wurde eine neue Akkordeon-Lösung eingeführt: Handorgel, ein Vanilla-JS-Script, das zugleich verspricht, barrierefrei zu sein.

Eine Verhaltensänderung gegenüber der alten Lösung solltest du kennen: Alle Akkordeon-Elemente sind standardmäßig zu Beginn geschlossen.

Styling: nicht ganz trivial

Schon in der Keynote der Contao Konferenz 2023 wies Leo Feyer darauf hin, dass man beim Styling mit dem Button ein wenig schauen muss. Dieser Eindruck bestätigt sich in der Praxis: Es ist gar nicht so leicht, die Darstellung des neuen Akkordeons schön zu machen.

Zwei Anlaufstellen helfen dir dabei:

• Basis-Styles: Die Grundlage kannst du dem Nutshell-Framework entnehmen: Akkordeon-Styles im Nutshell Framework
• Fertige Umsetzung: Wie die fertige Lösung im SOLO-Theme aussieht, siehst du hier: Handorgel-Akkordeon in SOLO 3

Weiterführend

Ab Contao 5.3 wird das Akkordeon im Backend als verschachteltes Element gepflegt — statt über Start- und Ende-Elemente. Mehr dazu im Artikel Verschachtelte Elemente in Contao 5.3.