HTML <details> Tag

Definitie en gebruik

<details> tag definieert andere gedetailleerde informatie die de gebruiker kan openen en sluiten.

<details> tag wordt meestal gebruikt om interactieve widgets te maken die de gebruiker kan openen en sluiten. Standaard zijn de widgets gesloten. Wanneer ze worden geopend, vouwen ze uit en tonen ze de inhoud.

Elke soort inhoud kan worden geplaatst in <details> tag.

Tip:<summary> tag en <details> Gebruik in combinatie om een zichtbare titel voor de gedetailleerde informatie te specificeren. Wanneer de gebruiker op de titel klikt, wordt <details> Het gedefinieerde inhoud.

Zie ook:

HTML DOM referentiehandleiding:Details object

Voorbeeld

Voorbeeld 1

Definieer gedetailleerde informatie die de gebruiker kan openen en sluiten:

<details>
  <summary>De toekomstige wereldcentrum (Epcot Center)</summary>
  <p>Epcot is a theme park in Walt Disney World Resort, featuring exciting attractions, international pavilions, award-winning fireworks, and seasonal events.</p>
</details>

Try it yourself

Voorbeeld 2

Gebruik CSS om de stijl van <details> en <summary> te instellen:

<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>De toekomstige wereldcentrum (Epcot Center)</summary>
  <p>Epcot is a theme park in Walt Disney World Resort, featuring exciting attractions, international pavilions, award-winning fireworks, and seasonal events.</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