Lasst uns Akkordeon spielen: Das HTML details-Element im Fokus

Erstellt am 27.09.2025

Inhalte auf einer Website zu platzieren kann eine Herausforderung sein. Ihr möchtet eure Nutzer:innen nicht mit zu vielen Infos auf einmal überfordern. Hierbei können Abschnitte mit Ein-/Ausblendfunktion hilfreich sein. Ein typisches Beispiel hierfür wäre eine FAQ-Seite mit einer Liste von erweiterbaren Fragen und Antworten.

Wir können das native HTML-Element <details> verwenden, um ein solches Offenlegungs-Widget zu erstellen. Das Element gibt es schon seit vielen Jahren, aber früher war es schwierig, es zu stylen und zu animieren. Dank Interop 2025 haben Browser die Implementierung des Elements erheblich verbessert und neue Features hinzugefügt.

Ein älterer Mann sitzt auf einem Stuhl vor einer Tür und spielt Akkordeon. Foto: © Jefferson Lucena / pexels.com

Ich werde kurz die Grundlagen des nativen HTML-Elements erläutern. Anschließend sehen wir uns die neuen Funktionen an. 🤩

Das `<details>` HTML-Element

Das native Details-Element erstellt ein Offenlegungs-Widget. Die in diesem Element enthaltenen Informationen sind nur sichtbar, wenn das Widget in einen offenen Zustand versetzt wird. Mit dem HTML-Element <summary> geben wir dem Widget eine Beschriftung. Hier ein Beispiel:

<details>
    <summary>An interesting question?</summary>
    <p>A fascinating answer!</p>
</details>

Mit nur wenigen Zeilen Code erhalten wir ein vollständig barrierefreies Offenlegungs-Widget. Es vermittelt seinen Namen, seine Rolle und seinen aktuellen Status an assistive Technologien und ist vollständig über die Tastatur bedienbar.

Neue Features

Exklusive Akkordeons mit dem `name`-Attribut

Eine Akkordeon-Komponente ist ein gängiges UI-Muster, das auf vielen Websites zu finden ist. Es besteht aus mehreren Widgets, die einzeln erweitert und reduziert werden können.

Eine Variante des Akkordeon-Musters ist das exklusive Akkordeon, bei dem jeweils nur ein Abschnitt geöffnet sein kann. Mit dem Attribut name könnt ihr eine Liste von <details>-Elementen zum exklusiven Akkordeon machen. Hier ein Code-Ausschnitt aus meiner CodePen-Demo:

<details name="faq">
    <summary>What is the Doctor's real name?</summary>
    <p>I'll never tell!</p>
</details>
<details name="faq">
    <summary>Who are the Daleks?</summary>
    <p>The Daleks are...</p>
</details>

Jetzt sind die einzelnen Offenlegungs-Widgets miteinander verknüpft. Wenn ihr einen der Abschnitte im Akkordeon öffnet, schließt der Browser automatisch alle anderen Abschnitte. Probiert es selbst aus:

Inhalte mit `::details-content` stylen

Ihr könnt den erweiterbaren Inhalt des <details>-Elements ganz einfach mit dem neuen CSS-Pseudo-Element ::details-content stylen. Hier ist ein Beispiel:

details::details-content {
    color: rgb(54, 69, 79);
    line-height: 1.3;
    padding-inline: 0.5rem;
}

Darüber hinaus können wir das Pseudo-Element verwenden, um das Öffnen und Schließen des Widgets zu animieren. Unser Ziel ist es, den Inhalt sanft von null zur vollen Höhe anwachsen zu lassen. Um dies zu erreichen, sind wir auf die noch experimentelle CSS-Eigenschaft interpolate-size angewiesen, die derzeit nur in Chromium-Browsern unterstützt wird.

Aber keine Sorge! Wir können die Animation als progressive Verbesserung implementieren. Mithilfe von @supports wenden wir die Animation nur an, wenn der Browser sie auch unterstützt:

@supports (interpolate-size: allow-keywords) {
    details {
        interpolate-size: allow-keywords;

        &::details-content {
            height: 0;
            overflow-y: clip;
            transition:
                height 0.35s ease,
                content-visibility 0.35s ease allow-discrete;
        }
    }

    details[open]::details-content {
        height: auto;
    }
}

Ich weiß, dass in dem obigen CSS-Code viel passiert. Ich werde es Schritt für Schritt erklären:

Standardmäßig unterstützen Browser keine Animationen und Übergänge, die einen intrinsischen Größenwert wie auto beinhalten. Wir aktivieren dieses Verhalten, indem wir interpolate-size: allow-keywords setzen.
Wir setzen die initiale Höhe des Inhalts auf null (height: 0) und schneiden überstehenden Inhalt ab.
Mit transition definieren wir die Animation der Eigenschaft height. Wir müssen auch die Eigenschaft content-visibility einbeziehen, die vom Browser automatisch gesetzt wird, wenn das Details-Element erweitert oder reduziert wird. Mehr Informationen findet ihr im Artikel zu transition-behavior.
Schließlich setzen wir height: auto für den Inhalt, wenn das Details-Element geöffnet ist.

Öffnet meine CodePen-Demo in Chrome oder Edge, um euch selbst von den flüssigen Animationen zu überzeugen. 😎

Benutzerdefinierter Indikator für offen/geschlossen

Browser zeigen das <details>-Element in der Regel mit einem kleinen Dreieck an, das sich dreht, um den geöffneten/geschlossenen Zustand anzuzeigen. Dieser Indikator sieht je nach Plattform und Browser anders aus.

Um das Dreieck durch einen benutzerdefinierten Indikator zu ersetzen, müssen wir den Wert display: list-item des Elements <summary> überschreiben. Ich verwende Flexbox, da dies mein gewünschtes Layout unterstützt. Ihr könnt aber beispielsweise auch display: block setzen.

Darüber hinaus müssen wir auch die Pseudo-Elemente für das Standard-Dreieck ausblenden. Dazu gehört ::-webkit-details-marker, das im Safari-Browser verwendet wird:

details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    &::marker,
    &::-webkit-details-marker {
        display: none;
    }
}

Als Nächstes definieren wir unseren benutzerdefinierten Indikator. Ich möchte ein Pfeilsymbol anzeigen, das nach unten zeigt, wenn das Offenlegungs-Widget geschlossen ist. Dank modernem CSS benötigen wir keine Bilder oder Icon-Fonts. Wir können die Form einfach mit dem Pseudo-Element ::after und der CSS-Eigenschaft clip-path zeichnen.

details summary::after {
    --shape-chevron-width: 1rem;
    --s: calc(var(--shape-chevron-width) / 4);

    content: "";
    aspect-ratio: 7/5;
    background: currentColor;
    clip-path: polygon(0 0, 0 var(--s), 50% 100%, 100% var(--s), 100% 0, 50% calc(100% - var(--s)));
    flex-shrink: 0;
    width: var(--shape-chevron-width);
}

Ich habe ein Code-Beispiel von der Website CSS Shape adaptiert. Dort findet ihr unzählige Code-Schnipsel für reine CSS-Formen, die mit einem einzigen Element und modernem CSS erstellt wurden. Schaut euch die Website unbedingt einmal an! 🥰

Schließlich möchten wir, dass das Pfeilsymbol nach oben zeigt, wenn das Offenlegungs-Widget geöffnet ist. Natürlich sollte der Übergang animiert sein. Hier ist der Code:

details {
    summary::after {
        rotate: 0deg;
        transition: rotate 0.35s ease;
    }

    &[open] summary::after {
        rotate: -180deg;
    }
}

Et voilà! Wir haben das Standard-Dreieck durch ein Pfeilsymbol ersetzt, das auf allen Plattformen und Browsern gleich aussieht. Hier ist das Endergebnis:

Flexbox und Grid-Layouts

Früher war es nicht möglich, den display-Wert des <details>-Elements zu ändern. Diese Einschränkung wurde nun in allen gängigen Browsern (z.B. Firefox 143) aufgehoben.

Endlich ist es möglich, Grid- oder Flex-Layouts für <details> zu verwenden. Weitere Informationen findet ihr im Artikel „More options for styling <details>” im Chrome Developer Blog.

Fazit

Die Elemente <details> und <summary> sind großartig! Dank der neuen Features können wir ganz einfach Widgets zum Ein- und Ausblenden und sogar exklusive Akkordeons mit benutzerdefinierten Stilen und Animationen erstellen.

Das bedeutet: Es gibt eine weitere Art von Inhalten, die wir mit nativen Webfunktionen erstellen können. Wir brauchen keine UI-Bibliotheken und deren lästige Neigung zu Breaking Changes mehr. Ich liebe das (native) Web! ❤️

Erstellt am 27.09.2025

Startseite Nach oben

Lasst uns Akkordeon spielen: Das HTML details-Element im Fokus

Das <details> HTML-Element