<details>

Das <details>-Element erstellt ein aufklappbares Widget, das Inhalte ein- und ausblenden kann, ganz ohne JavaScript. Es ist das native HTML-Element für Disclosure-Widgets: FAQs, Akkordeons, zusätzliche Details oder versteckte Optionen. Ein Klick auf die Zusammenfassung (das <summary>-Kind) toggelt die Sichtbarkeit des restlichen Inhalts.

Steckbrief <details>

Kategorie: Einbettung & Widgets
Art: Interaktiv
Attribute: 2
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 03.07.2026

Grundlagen

Vor <details> mussten Entwickler für jedes aufklappbare Element JavaScript schreiben: Event-Listener, CSS-Klassen togglen, ARIA-Attribute verwalten. <details> macht das alles überflüssig: Das Auf- und Zuklappen ist eingebaut, die Barrierefreiheit funktioniert automatisch, und der Zustand (offen/geschlossen) wird vom Browser verwaltet.

<details> enthält ein <summary>-Element als Zusammenfassung und beliebigen weiteren Inhalt
Ohne <summary> zeigt der Browser einen Standard-Text (“Details”) als Zusammenfassung
Das open-Attribut steuert, ob das Widget initial geöffnet ist
Das name-Attribut ermöglicht exklusives Akkordeon-Verhalten: nur ein <details> mit demselben Namen ist gleichzeitig offen
Der Browser zeigt einen Disclosure-Dreieck (▶/▼) neben dem <summary>
<details> feuert ein toggle-Event, wenn sich der Zustand ändert

Syntax

index.html

Grundsyntax

<details>
  <summary>Was ist HTML?</summary>
  <p>HTML (HyperText Markup Language) ist die
    Standard-Auszeichnungssprache für Webseiten.
    Sie definiert die Struktur und den Inhalt
    einer Seite.</p>
</details>

Attribute

2 Attribute

Attribut und Beispiel	Beschreibung
`open` Boolean open	Zeigt das Widget initial im geöffneten Zustand an. Ohne dieses Attribut ist der Inhalt standardmäßig versteckt.
`name` String name="faq"	Verbindet mehrere details-Elemente zu einer exklusiven Gruppe (Akkordeon). Nur ein Element mit demselben name kann gleichzeitig offen sein.

Beispiele

4 Beispiele

Der klassische Anwendungsfall: Eine Liste häufiger Fragen, bei der Nutzer gezielt die Antworten aufklappen können, die sie interessieren.

index.html

FAQ-Bereich

<details>
  <summary>Brauche ich Vorkenntnisse?</summary>
  <p>Nein, der Kurs startet bei Null. Du brauchst
    nur einen Computer und einen Browser.</p>
</details>

<details>
  <summary>Wie lange habe ich Zugang?</summary>
  <p>Der Zugang ist unbegrenzt. Einmal gekauft,
    kannst du den Kurs so oft durcharbeiten,
    wie du willst.</p>
</details>

<details>
  <summary>Gibt es eine Geld-zurück-Garantie?</summary>
  <p>Ja, du hast 14 Tage Zeit. Wenn der Kurs
    nichts für dich ist, bekommst du dein Geld
    zurück.</p>
</details>

Das name-Attribut verbindet mehrere <details>-Elemente zu einer Gruppe. Wenn eines geöffnet wird, schließen sich die anderen automatisch. So entsteht ein echtes Akkordeon, ganz ohne JavaScript.

index.html

Akkordeon mit name-Attribut

<!-- Nur eines kann gleichzeitig offen sein -->
<details name="stack" open>
  <summary>Frontend</summary>
  <p>React, TypeScript und Tailwind CSS bilden
    das Frontend. Astro wird als Meta-Framework
    eingesetzt.</p>
</details>

<details name="stack">
  <summary>Backend</summary>
  <p>Node.js mit Express für die API. PostgreSQL
    als Datenbank, Redis für Caching.</p>
</details>

<details name="stack">
  <summary>Deployment</summary>
  <p>Vercel für das Frontend, Railway für Backend
    und Datenbank.</p>
</details>

Das Standard-Aussehen von <details> ist minimalistisch. Mit CSS kannst du es zu einem ansprechenden UI-Element machen. Das Disclosure-Dreieck lässt sich über den ::marker-Pseudo-Selektor oder list-style anpassen.

index.html

Gestyltes Widget

<style>
  .styled-details {
    border: 2px solid #4338ca;
    border-radius: 12px;
    overflow: hidden;
  }

  .styled-details summary {
    padding: 16px;
    cursor: pointer;
    font-weight: bold;
    background: #4338ca;
    color: white;
    /* Dreieck entfernen */
    list-style: none;
  }

  /* Eigenes Icon statt Dreieck */
  .styled-details summary::after {
    content: "+";
    font-size: 1.5em;
  }

  .styled-details[open] summary::after {
    content: "−";
  }
</style>

<details class="styled-details">
  <summary>Mehr über CSS erfahren</summary>
  <div class="content">
    <p>CSS ist die Sprache, mit der du das
      Aussehen deiner Webseiten steuerst.</p>
  </div>
</details>

Für fortgeschrittene Anwendungsfälle kannst du das toggle-Event nutzen, um auf Zustandsänderungen zu reagieren, etwa für Tracking oder dynamisches Nachladen von Inhalten.

index.html

toggle-Event

<details id="info">
  <summary>Klick mich!</summary>
  <p>Dieser Inhalt ist jetzt sichtbar.</p>
</details>
<p id="status">Status: geschlossen</p>

<script>
  document.getElementById("info")
    .addEventListener("toggle", (e) => {
      const status = e.target.open
        ? "offen" : "geschlossen";
      document.getElementById("status")
        .textContent = "Status: " + status;
    });
</script>

Barrierefreiheit

<details> ist eines der besten Beispiele für native Barrierefreiheit in HTML. Der Browser kümmert sich um alles: Das <summary> verhält sich wie ein Button: es ist per Tastatur bedienbar (Enter/Space zum Öffnen/Schließen) und der Zustand (erweitert/zusammengeklappt) wird Screenreadern mitgeteilt.

Deshalb solltest du <details> verwenden, wenn du Inhalte aufklappbar machen willst, anstatt ein eigenes Widget mit JavaScript und ARIA-Attributen zu bauen. Die native Lösung ist zuverlässiger und hat weniger Fehlerquellen.

Achte darauf, dass das <summary> den Inhalt gut beschreibt. Blinde Nutzer entscheiden anhand des Summary-Texts, ob sie den Bereich öffnen. Ein generisches “Mehr anzeigen” ist weniger hilfreich als “Systemanforderungen anzeigen”.

Häufige Fehler

4 Fehler

01 Kein <summary> angeben

Ohne <summary> zeigt der Browser einen Standard-Text (“Details” oder ähnlich) als klickbaren Bereich. Das ist wenig aussagekräftig. Verwende immer ein <summary> mit beschreibendem Text.

02 <summary> nicht als erstes Kind

<summary> muss das erste Kind-Element von <details> sein. Wenn es an einer anderen Position steht, ist das Verhalten browserspezifisch und unvorhersehbar.

03 <details> für Navigation missbrauchen

<details> ist für ergänzende Inhalte gedacht, nicht als Ersatz für <nav>-Menüs. Wenn der Inhalt für die Seitennutzung wichtig ist, sollte er nicht standardmäßig versteckt sein.

04 Animationen beim Öffnen/Schließen

Auf dem <details>-Element selbst lässt sich das Aufklappen nicht per CSS-Transition animieren. Der Inhalt erscheint und verschwindet abrupt. Die Lösung ist das Pseudo-Element ::details-content: Damit kannst du den aufklappbaren Inhalt direkt stylen und sanft ein- und ausblenden, ganz ohne JavaScript. Es wird von allen modernen Browsern unterstützt. In älteren Browsern klappt der Inhalt weiterhin abrupt auf, die Funktionalität bleibt aber erhalten.

Browser-Kompatibilität

5 von 5

Das details-Element wird von allen modernen Browsern vollständig unterstützt. Auch das name-Attribut für Akkordeon-Verhalten wird von allen modernen Browsern unterstützt, ältere Browser-Versionen ignorieren es.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Die Unterstützung von details in Email-Clients ist sehr eingeschränkt. Die meisten Clients entfernen das interaktive Verhalten. Für E-Mails solltest du Inhalte immer direkt anzeigen.

Apple Mail

Komplett

Apple Mail rendert details korrekt mit Aufklapp-Funktion.
Gmail

Keine

Gmail entfernt details/summary komplett. Inhalte werden gar nicht oder nur als Fließtext angezeigt.
Outlook

Keine

Outlook unterstützt details nicht. Verwende stattdessen immer sichtbaren Inhalt.
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Support für interaktive Elemente. Inhalte direkt darstellen.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<details>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter