HTML-<details>-Tag
Beispiel
Geben Sie Details an, die der Benutzer bei Bedarf öffnen und schließen kann:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »
Weitere "Try it Yourself" („Probieren Sie es selbst“)-Beispiele weiter unten.
Definition und Verwendung
Das Tag <details> gibt zusätzliche Details an, die der Benutzer bei Bedarf öffnen und schließen kann.
Das Tag <details> wird häufig zum Erstellen eines interaktiven Widgets verwendet, das der Benutzer öffnen und schließen kann. Standardmäßig ist das Widget geschlossen. Wenn es geöffnet ist, erweitert es sich und zeigt den darin enthaltenen Inhalt an.
Jede Art von Inhalten kann in das <details> getagelt werden.
Tipp: Das <summary> wird in Verbindung mit <details> verwendet, um eine sichtbare Überschrift für die Details anzugeben.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| open | open | Geben Sie an, dass die Details für den Benutzer sichtbar (offen) sein sollen |
Globale Attribute
Das Tag <details> unterstützt auch die Globale Attribute in HTML.
Ereignisattribute
Das Tag <details> unterstützt auch die Ereignisattribute in HTML.
Weitere Beispiele
Beispiel
Verwenden Sie CSS, um <details> und <summary> zu formatieren:
<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>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Try it Yourself »
Verwandte Seiten
HTML-DOM-Referenz: Details Objekt
Standard CSS -Einstellungen
Die meisten Browser werden das Element <details> mit den folgenden Standardwerten angezeigt:
details {
display: block;
}
