<details>

Zuletzt aktualisiert am 3. Juli 2026

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.

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

<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

Beispiele

FAQ-Bereich

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

<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>

Akkordeon mit name-Attribut

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.

<!-- 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>

Gestyltes Details-Widget

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.

<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>

Details mit JavaScript toggle-Event

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.

<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

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.

<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.

<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.

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

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.

Email-Kompatibilität

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.

Verwandte Elemente