<details> HTML-Element zur Anzeige zusätzlicher Informationen

Probieren Sie es aus

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

Attribute

Dieses Element unterstützt die globalen Attribute.

open

Dieses boolesche Attribut gibt an, ob die Details – also der Inhalt des <details>-Elements – derzeit sichtbar sind. Ist das Attribut vorhanden, werden die Details angezeigt; fehlt es, bleiben sie verborgen. Standardmäßig fehlt das Attribut, sodass die Details nicht sichtbar sind.

Hinweis: Damit die Details verborgen werden, müssen Sie dieses Attribut vollständig entfernen. open="false" macht die Details sichtbar, da es sich um ein boolesches Attribut handelt.

name

Mit diesem Attribut können mehrere <details>-Elemente miteinander verknüpft werden, sodass jeweils nur eines geöffnet sein kann. So lassen sich UI-Funktionen wie Akkordeons ohne Skripte erstellen.

Das name-Attribut legt einen Gruppennamen fest. Geben Sie mehreren <details>-Elementen denselben name-Wert, um sie zu gruppieren. Von den gruppierten <details>-Elementen kann jeweils nur eines geöffnet sein: Wird eines geöffnet, schließt sich ein anderes. Wenn mehrere gruppierte <details>-Elemente das open-Attribut besitzen, wird nur das erste in der Reihenfolge des Quellcodes geöffnet dargestellt.

Hinweis: <details>-Elemente müssen im Quellcode nicht unmittelbar nebeneinanderstehen, um zur selben Gruppe zu gehören.

Verwendungshinweise

Ein <details>-Widget kann sich in einem von zwei Zuständen befinden. Im standardmäßigen geschlossenen Zustand werden nur das Dreieck und die Beschriftung innerhalb von <summary> angezeigt. Fehlt ein <summary>-Element, wird stattdessen eine vom User Agent festgelegte Standardbeschriftung angezeigt.

Wenn Benutzer auf das Widget klicken oder es fokussieren und anschließend die Leertaste drücken, klappt es auf und zeigt seinen Inhalt. Da das Dreieck beim Öffnen und Schließen gedreht wird, werden solche Widgets manchmal als „Twisty“ bezeichnet.

Sie können das Widget mit CSS gestalten und es programmgesteuert öffnen und schließen, indem Sie sein open-Attribut setzen oder entfernen. Derzeit gibt es allerdings keine integrierte Möglichkeit, den Übergang zwischen geöffnetem und geschlossenem Zustand zu animieren.

Im geschlossenen Zustand ist das Widget standardmäßig nur so hoch, dass das Dreieck und die Zusammenfassung angezeigt werden. Im geöffneten Zustand erweitert es sich, um die enthaltenen Details anzuzeigen.

Vollständig standardkonforme Implementierungen wenden automatisch die CSS-Eigenschaft display: list-item auf das <summary>-Element an. Sie können dies oder das Pseudoelement ::marker verwenden, um das Widget anzupassen.

Ereignisse

Zusätzlich zu den üblichen Ereignissen, die HTML-Elemente unterstützen, unterstützt das <details>-Element das toggle-Ereignis. Es wird an das <details>-Element ausgelöst, wenn dessen Zustand zwischen geöffnet und geschlossen wechselt. Das Ereignis wird nach der Zustandsänderung ausgelöst. Ändert sich der Zustand jedoch mehrmals, bevor der Browser das Ereignis auslösen kann, werden die Ereignisse zusammengefasst, sodass nur eines ausgelöst wird.

Mit einem Event-Listener für das toggle-Ereignis können Sie erkennen, wann sich der Zustand des Widgets ändert:

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

Beispiele

Einfaches Beispiel für aufklappbare Details

Dieses Beispiel zeigt ein einfaches <details>-Element mit einem <summary>-Element.

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Ein zunächst geöffnetes <details>-Element erstellen

Damit das <details>-Element anfangs geöffnet ist, fügen Sie das boolesche Attribut open hinzu:

<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Mehrere benannte <details>-Elemente

Dieses Beispiel enthält mehrere <details>-Elemente mit demselben Namen, sodass jeweils nur eines geöffnet sein kann:

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

Ergebnis

Versuchen Sie, alle Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Darstellung anpassen

Nun wenden wir etwas CSS an, um die Darstellung des <details>-Elements anzupassen.

CSS

details {
  font:
    16px "Open Sans",
    "Calibri",
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #dddddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccccff;
}

Dieses CSS erzeugt eine Darstellung ähnlich einer Oberfläche mit Tabs: Wenn Sie auf einen Tab klicken, öffnet er sich und zeigt seinen Inhalt.

HTML

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Auf der Seite zum <summary>-Element finden Sie ein Beispiel zur Anpassung des Widgets.

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <summary>
• ::details-content