HTML <details> Tag
Voorbeeld
Geef details op die de gebruiker op aanvraag kan openen en sluiten:
<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>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <details>tag specificeert aanvullende details die de gebruiker op aanvraag kan openen en sluiten.
De <details>tag wordt vaak gebruikt om een interactieve widget te maken die de gebruiker kan openen en sluiten. Standaard is de widget gesloten. Wanneer het is geopend, wordt het uitgevouwen en wordt de inhoud erin weergegeven.
Elke vorm van inhoud kan in de <details>tag worden geplaatst.
Tip: De tag <summary><details> wordt gebruikt in combinatie met om een zichtbare kop voor de details te specificeren.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
attributen
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
Algemene kenmerken
De <details>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <details>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik CSS om <details> en <summary> op te maken:
<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>
Gerelateerde pagina's
HTML DOM-referentie: Details Object
Standaard CSS-instellingen
De meeste browsers geven het <details>element weer met de volgende standaardwaarden:
details {
display: block;
}