Akkordeons ohne JavaScript mit details animieren

Weil details das Verhalten schon mitbringt, das ein eigenes Akkordeon mühsam nachbaut. summary ist mit der Tastatur erreichbar, Enter und Leertaste schalten um, und der Zustand offen oder geschlossen geht an Screenreader, ohne dass ein Skript aria-expanded setzt. Das Element läuft seit Januar 2020 in allen großen Browsern.

Ein Vorteil fällt erst auf, wenn er fehlt. Die Suche im Browser findet Text auch in geschlossenen Einträgen und öffnet den passenden. Laut MDN kann Chrome das seit Version 97, Firefox seit 148 und Safari seit 26.2, dort noch mit einem Fehler beim Scrollen zum Treffer. Ein Akkordeon aus div und Button versteckt seinen Inhalt dagegen so, dass die Suche ihn nicht findet oder nicht aufklappt.

Was details lange nicht konnte, war die Gestaltung. Der Inhalt erschien schlagartig, und um ihn weich zu öffnen, musste man ihn in ein eigenes Element packen und die Höhe per Skript messen. Genau das ändern die drei Bausteine in den nächsten Abschnitten.

Mit demselben Wert im Attribut name an allen details der Gruppe. Öffnet jemand einen Eintrag, schließt der Browser den bisher offenen. Chrome und Edge können das seit Version 120, Firefox seit 130 und Safari seit 17.2. Seit September 2024 gilt das Attribut damit als Baseline.

name verhindert nicht, dass alle Einträge geschlossen sind. Ein Klick auf den offenen schließt ihn wie gewohnt. Und stehen zwei Einträge mit open im Markup, bleibt nur einer offen: Im Test mit Chrome 153 war es der erste. Wer einen Eintrag vorab öffnen will, setzt open also an genau einer Stelle.

Ob eine Gruppe überhaupt exklusiv sein sollte, ist eine eigene Frage. In einem FAQ, in dem jemand zwei Antworten vergleichen will, stört es, wenn die erste zuklappt. Bei Einstellungen oder Schritten, die nacheinander kommen, hilft es, weil die Seite kurz bleibt.

Ein Pseudo-Element für alles in details außer summary. Es lässt sich gestalten wie ein Kasten, mit Höhe, Overflow, Abständen und Übergängen, ohne dass man den Inhalt in ein zusätzliches Element packen muss. Chrome und Edge kennen es seit Version 131, Firefox seit 143 und Safari seit 18.4. Seit September 2025 gilt es als Baseline.

Möglich wurde das, weil Chrome mit Version 131 die Darstellung des Inhaltsbereichs geändert hat: Er ist jetzt ein Block statt eines Elements, das nur seine Kinder durchreicht. Erst damit hat er eine eigene Höhe, die sich setzen und animieren lässt.

Eine Einschränkung gibt es in Safari. Pseudo-Elemente lassen sich dort nicht an ::details-content anhängen, ein ::details-content::before greift also nicht. Wer eine Trennlinie oder einen Verlauf am Inhalt braucht, setzt ihn auf ein Element in der Antwort.

Mit interpolate-size: allow-keywords auf :root und einem Übergang auf height am ::details-content. Bisher war auto kein Wert, zwischen dem und einer Zahl ein Browser rechnen konnte, deshalb sprang die Höhe. interpolate-size erlaubt genau diese Rechnung. Die Eigenschaft wird vererbt, eine Zeile auf :root reicht also für die ganze Seite.

Für das Öffnen genügt das. Das Schließen braucht einen zweiten Eintrag in der Transition. Ein geschlossenes details versteckt seinen Inhalt über content-visibility, und das geschieht sofort, bevor die Höhe schrumpfen könnte. Steht content-visibility mit allow-discrete in der Transition, wartet der Wechsel bis zum Ende der Dauer, und der Inhalt bleibt sichtbar, solange er zuklappt. allow-discrete läuft seit Chrome 117, Firefox 129 und Safari 17.4.

overflow: clip schneidet den Inhalt während der Bewegung ab. Mit hidden ginge das auch, clip legt aber keinen Scroll-Container an. Im Test mit Chrome 153 öffnete und schloss das Akkordeon so in beide Richtungen weich, auch dann, wenn name den vorher offenen Eintrag zuklappte.

Ein Akkordeon, das richtig öffnet und schließt, aber ohne Bewegung. Die Browserdaten von MDN führen interpolate-size im November 2026 nur für Chrome und Edge ab Version 129, als experimentell. caniuse zeigt für Firefox bis Version 162 und Safari bis 27.3 keine Unterstützung und kommt im Oktober 2026 auf rund 74 Prozent der weltweiten Nutzung.

Weil beide Browser ::details-content kennen, greifen dort height: 0 und height: auto trotzdem. Nur der Übergang dazwischen fehlt, denn ohne interpolate-size ist auto kein Ziel, auf das sich rechnen lässt. Das Ergebnis ist das gewohnte details, und es braucht keinen Rückfall, der etwas reparieren müsste.

Die Funktion calc-size, mit der sich auto auch ohne die Eigenschaft auf :root animieren ließe, hilft hier nicht weiter. Sie steht in denselben Browsern bereit wie interpolate-size, also ebenfalls nur in Chrome und Edge ab 129.

Mit der Variante details-content für den Inhaltsbereich, open für den offenen Zustand und einer beliebigen Eigenschaft für interpolate-size. Nachgesehen in Tailwind CSS 4.3.5: details-content: schreibt auf ::details-content, open: trifft details mit dem Attribut open, und transition-discrete setzt transition-behavior: allow-discrete. Eine eigene Klasse für interpolate-size gibt es nicht, die Schreibweise in eckigen Klammern erzeugt sie.

Die Varianten lassen sich verketten. open:details-content:h-auto ergibt die Höhe auto am Inhalt eines offenen details, und weil diese Regel spezifischer ist als details-content:h-0, gewinnt sie ohne Umwege. motion-reduce:details-content:transition-none schaltet die Bewegung bei reduzierter Bewegung ab.

In React bleibt das Akkordeon ohne Zustand. name und open sind gewöhnliche Attribute, und der Browser merkt sich, welcher Eintrag offen ist. Wer den Zustand doch braucht, hört auf das toggle-Ereignis, statt open bei jedem Rendern zu setzen.