HTML-<details> Tag

Definition und Verwendung

<details> Tag definiert andere detaillierte Informationen, die der Benutzer nach Bedarf öffnen und schließen kann.

<details> Tags werden normalerweise verwendet, um interaktive Mini-Widgets zu erstellen, die der Benutzer öffnen und schließen kann. Standardmäßig sind die Widgets geschlossen. Wenn sie geöffnet werden, erweitern sie sich und zeigen den Inhalt an.

Jeglicher Inhaltstyp kann in <details> im Tag.

Hinweis:<summary> Tag und <details> Kombiniert können Sie eine sichtbare Überschrift für die Details angeben. Wenn der Benutzer auf die Überschrift klickt, wird <details> Definierte Inhalte.

Siehe auch:

HTML DOM Referenzhandbuch:Details-Objekt

Beispiel

Beispiel 1

Definieren Sie detaillierte Informationen, die der Benutzer nach Bedarf öffnen und schließen kann:

<details>
  <summary>Der Mittelpunkt der Zukunftswelt (Epcot Center)</summary>
  <p>Epcot ist ein Themenpark im Walt Disney World Resort und bietet aufregende Attraktionen, internationale Pavillons, mehrfach ausgezeichnete Feuerwerke und saisonale Veranstaltungen.</p>
</details>

Try It Yourself

Beispiel 2

Stellen Sie mit CSS die Stile für <details> und <summary> ein:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Der Mittelpunkt der Zukunftswelt (Epcot Center)</summary>
  <p>Epcot ist ein Themenpark im Walt Disney World Resort und bietet aufregende Attraktionen, internationale Pavillons, mehrfach ausgezeichnete Feuerwerke und saisonale Veranstaltungen.</p>
</details>
</body>
</html>

Try It Yourself

Attribute

Attribute Value Description
open open Specifies that the details should be visible to the user (open).

Global Attributes

<details> The tag also supports Global Attributes in HTML.

Event Attributes

<details> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <details> Element:

details {
  display: block;
}

Browser Support

The numbers in the table indicate the first browser version to fully support the element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0