<details> & <summary>

Das native Akkordeon
Das <details>-Element ist ein natives HTML-Element für ein- und ausklappbare Inhalte (Disclosure / Akkordeon), ganz ohne JavaScript.

Native HTML-Lösungen sind meist robuster, zugänglicher und wartungsärmer als selbstgebaute Akkordeons mit div + JavaScript.

HTML Syntax

Aufbau & Regeln

<details>
  <summary>Titel</summary>
  <p>Inhalt</p>
</details>

<details>Container für ein- und ausklappbaren Inhalt
<summary>Überschrift & Trigger

Wichtig: <summary> sollte das erste sichtbare Element innerhalb von <details> sein.

Grundprinzip

<summary> sollte das erste sichtbare Element in <details> sein (Titel/Trigger).
Der sichtbare/unsichtbare Zustand wird über open gesteuert.
Der Trigger ist per Tastatur bedienbar (Enter/Space) und grundsätzlich gut für Accessibility.
Ohne CSS zeigt der Browser meist ein kleines Marker-Icon (Dreieck).

Einfachstes Beispiel

<summary> ist der sichtbare Titel und gleichzeitig der Klick- und Fokus-Trigger.

Dieser Inhalt ist standardmässig verborgen und wird erst beim Öffnen sichtbar.

Standardmässig geöffnet

Ich bin bereits offen

Mit dem Attribut open ist der Inhalt beim Laden der Seite sichtbar.

Ich bin geschlossen

Ohne das Attribut open bleibt der Inhalt beim Laden verborgen.

Was darf im <details> stehen?

Fast alle HTML-Elemente sind erlaubt:

Absätze, Listen, Überschriften
Code-Blöcke
Bilder, Tabellen, Formulare

Beispiel mit Code und Bild

In <details> darf fast alles stehen:

<details>
  <summary>Beispiel</summary>
  <pre><code>Code</code></pre>
</details>

Beispielbild — Ein Bild im aufgeklappten Bereich.

Interaktion & Accessibility

Tastatur & Fokus

<summary> ist von Haus aus fokussierbar und mit Enter oder Space bedienbar.

Screenreader erkennen automatisch:

ob der Bereich offen oder geschlossen ist
dass es sich um ein interaktives Element handelt

Der open-Zustand

Der aktuelle Zustand kann über das Attribut open abgefragt werden. Es ist ein Boolean-Attribut: vorhanden = offen, nicht vorhanden = geschlossen.

details[open] {
  /* Styles für offenen Zustand */
}

Nur ein Eintrag gleichzeitig offen?

<details> verhält sich nativ nicht wie ein Akkordeon mit „genau einem offenen Eintrag“. Mehrere Bereiche können gleichzeitig offen sein. Wenn du erzwingen willst, dass immer nur einer offen ist, brauchst du zusätzlich JavaScript.

Typische Einsatzgebiete

FAQs
Zusatzinformationen
Erklärungen & Hinweise
Progressive Disclosure

Browser-Unterstützung

<details> wird von allen modernen Browsern unterstützt.

Zusammenfassung

HTML only native Lösung ohne JavaScript
<summary>Trigger & Beschriftung des Bereichs
openBoolean-Attribut: vorhanden = offen, fehlt = zu
Mehrere offenmehrere <details> können gleichzeitig offen sein
CSS / JSCSS frei gestaltbar, „nur eins offen“ braucht JavaScript

Basic CSS

See the Pen Details Accordion mit Basic CSS by Intensivstation (@intensivstation) on CodePen.

Das ::after-Pseudoelement stellt das Plus- und Minuszeichen dar.

details>summary:after { 
  content: '+';
  display: inline-block;
  width: 30px;
  float: right;
  }

details[open]>summary:after {
   content: '–';
    }

Advanced mit Animation

See the Pen <DETAILS> & <SUMMARY> by Intensivstation (@intensivstation) on CodePen.

Warum funktioniert das ohne JavaScript?

Konventionelle CSS-Animationen können keine height: auto animieren. Moderne Browser stellen jedoch den aufklappbaren Bereich eines <details>-Elements als Pseudoelement ::details-content zur Verfügung. Dieses kann über content-visibility und height animiert werden — ganz ohne JavaScript.

Ist interpolate-size nicht verfügbar, bleibt die native Browser-Animation (sofern unterstützt) oder ein sanfter Fallback ohne Animation.

Empfohlen: Animate details & summary with a few lines of CSS

Animation mit JavaScript

See the Pen Details Accordion mit JS by Intensivstation (@intensivstation) on CodePen.