Ausführbare HTML-Docs: details und summary

Q: Wie ist ein details-Element standardmäßig geöffnet?

Füg das boolesche Attribut open hinzu: . Der Browser fügt dieses Attribut hinzu und entfernt es, wenn der Nutzer umschaltet, CSS kann also details[open] stylen.

Q: Wie mache ich ein Akkordeon, bei dem nur ein Abschnitt offen ist?

Gib jedem der Gruppe dasselbe Attribut name, zum Beispiel name="faq". Öffnet man einen, schließen sich die anderen der Gruppe, ganz ohne JavaScript.

Q: Wie entferne oder ändere ich den Pfeil in einer details summary?

Setz list-style: none an summary und füg für Safari summary::-webkit-details-marker { display: none; } hinzu. Zeichne dann deinen eigenen Hinweis, zum Beispiel mit summary::after, und ändere ihn mit details[open] summary::after.

Q: Kann ich erkennen, wann sich ein details-Element öffnet?

Ja. Hör auf das Event toggle am -Element und lies seine Eigenschaft open. details.open = true in JavaScript öffnet es.

Aufklappbarer Inhalt mit details und summary

Pack Inhalt in <details> und setz ein <summary> an den Anfang. Die summary bleibt sichtbar; alles andere ist versteckt, bis der Leser darauf klickt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Klick auf die Frage, um sie zu öffnen, und noch einmal, um sie zu schließen. Der Browser fügt das Dreieck hinzu, macht die summary fokussierbar, schaltet sie mit Enter oder Leertaste um und sagt Screenreadern, ob sie auf- oder zugeklappt ist. JavaScript ist nicht beteiligt.

Wenn du <summary> weglässt, zeigt der Browser stattdessen eine Standardbeschriftung an (auf Deutsch „Details“).

Standardmäßig geöffnet

Das boolesche Attribut open zeigt den Inhalt von Anfang an. Der Browser fügt open hinzu und entfernt es, wenn der Leser umschaltet, es ist also auch der Ansatzpunkt fürs Styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

Der geöffnete Kasten hat durch details[open] einen blauen Rahmen. Öffne „Returns“, und er wird auch blau; beide können gleichzeitig offen sein.

Akkordeon: immer nur einer offen

Gib mehreren <details>-Elementen denselben name, und sie werden zu einer exklusiven Gruppe: Öffnet man einen, schließen sich die anderen. Dafür brauchte man früher JavaScript; heute funktioniert es in aktuellen Versionen von Chrome, Edge, Firefox und Safari allein mit dem Attribut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Öffne die zweite Frage, und die erste schließt sich. Entferne die name-Attribute, und sie öffnen sich wieder unabhängig voneinander. Ein exklusives Akkordeon versteckt Inhalte, die der Leser vielleicht vergleichen will. Nimm es also, wenn die Abschnitte Alternativen sind, und einfache <details>, wenn Leute mehrere offen haben wollen könnten.

Den Marker stylen

Das Dreieck ist ein Listenmarker an der summary. list-style: none entfernt ihn (die Regel ::-webkit-details-marker deckt Safari ab), und ein Pseudo-Element kann deinen eigenen Hinweis zeichnen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Das Pluszeichen dreht sich beim Öffnen um 45 Grad zu einem Kreuz. Behalte einen sichtbaren Fokusstil wie die :focus-visible-Umrandung hier: Sobald du den Standardmarker entfernst, ist der Fokusrahmen das, worauf sich Tastaturnutzer verlassen.

Das Event toggle und die Eigenschaft open

JavaScript kann details.open lesen und setzen, und das Event toggle feuert nach jeder Änderung, egal ob ein Klick, eine Taste oder ein Skript sie ausgelöst hat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

„Expand all“ setzt open an beiden, und das Log zeigt das letzte toggle-Event. Das Event steigt nicht auf (bubbling), hör also an jedem <details>-Element darauf statt an einem Elternelement.

Was in eine summary gehört

Eine summary enthält Text, Inline-Elemente oder eine Überschrift, wenn der Titel des Abschnitts in die Gliederung der Seite gehört:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Vermeide Links, Buttons und Formularfelder in <summary>: Die summary ist schon ein Bedienelement, ein Bedienelement darin wird also leicht übersehen oder aus Versehen getroffen, und Screenreader sagen verschachtelte Bedienelemente schlecht an. Setz interaktiven Inhalt stattdessen in den Körper von <details>.

Häufige Fehler

Einen Umschalter mit einem <div> und JavaScript bauen. <details> erledigt Klicks, Tasten und den Zustand für Screenreader schon. Wenn du doch einen eigenen Umschalter brauchst, nimm einen Button mit aria-expanded.
<summary> irgendwo anders als an den Anfang setzen. Es muss das erste Kind von <details> sein.
Den Marker ohne Ersatz verstecken. Gib den Lesern irgendein Zeichen, dass sich die summary öffnen lässt, wie das Pluszeichen oben.
Den Inhalt mit display verstecken. Schalte stattdessen open um; CSS, das den Inhalt sichtbar oder unsichtbar erzwingt, arbeitet gegen den Zustand des Browsers.
Exklusive Gruppen für Inhalte, die man vergleicht. Nimm name nur, wenn immer nur ein offener Abschnitt sinnvoll ist.

Häufig gestellte Fragen

Was machen details und summary in HTML?

<details> erzeugt ein Aufklapp-Widget: einen Abschnitt, der sich öffnen und schließen lässt. Sein erstes Kind, <summary>, ist die immer sichtbare Beschriftung; ein Klick darauf (oder Enter bzw. Leertaste, wenn sie fokussiert ist) zeigt oder versteckt alles andere in <details>.

Wie ist ein details-Element standardmäßig geöffnet?

Füg das boolesche Attribut open hinzu: <details open>. Der Browser fügt dieses Attribut hinzu und entfernt es, wenn der Nutzer umschaltet, CSS kann also details[open] stylen.

Wie mache ich ein Akkordeon, bei dem nur ein Abschnitt offen ist?

Gib jedem <details> der Gruppe dasselbe Attribut name, zum Beispiel name="faq". Öffnet man einen, schließen sich die anderen der Gruppe, ganz ohne JavaScript.

Wie entferne oder ändere ich den Pfeil in einer details summary?

Setz list-style: none an summary und füg für Safari summary::-webkit-details-marker { display: none; } hinzu. Zeichne dann deinen eigenen Hinweis, zum Beispiel mit summary::after, und ändere ihn mit details[open] summary::after.

Kann ich erkennen, wann sich ein details-Element öffnet?

Ja. Hör auf das Event toggle am <details>-Element und lies seine Eigenschaft open. details.open = true in JavaScript öffnet es.

Verwandte Konzepte