Accordion
UI-Muster: eine Liste einklappbarer Abschnitte, ein Klick klappt sie auf. Zeigt viel Information, ohne den Bildschirm zu überladen. Am häufigsten bei FAQs, Seitenleisten-Navigation und Einstellungsseiten.
Natives HTML: <details><summary> (im Browser eingebautes Accordion, kein JavaScript nötig). Eigene Implementierungen: React Bootstrap, Mantine Accordion, Radix UI Accordion (headless), shadcn/ui. Barrierefreiheit: ARIA-Attribute aria-expanded, aria-controls. UX-Debatte: Accordions senken die Informationsdichte, verbessern aber den Fokus — sinnvoll für "Scannen statt Lesen". Klassische Falle: Höhen-Animationen zicken in modernen Browsern (height: auto lässt sich nicht animieren) — Abhilfe schaffen interpolate-size: allow-keywords (CSS 2024) oder @starting-style.