Značka HTML <details>


Příklad

Zadejte podrobnosti, které může uživatel na požádání otevřít a zavřít:

<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>

Další příklady „Vyzkoušejte si to sami“ níže.


Definice a použití

Značka <details>určuje další podrobnosti, které může uživatel na požádání otevřít a zavřít.

Značka <details>se často používá k vytvoření interaktivního widgetu, který může uživatel otevřít a zavřít. Ve výchozím nastavení je widget uzavřen. Po otevření se rozbalí a zobrazí obsah.

<details>Do štítku  lze vložit jakýkoli obsah .

Tip: Tag <summary> se používá ve spojení s <details>k určení viditelného záhlaví pro podrobnosti.


Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která prvek plně podporuje.

Element
<details> 12.0 79.0 49.0 6.0 15.0

Atributy

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

Globální atributy

Značka <details>také podporuje globální atributy v HTML .


Atributy události

Značka <details>také podporuje atributy událostí v HTML .



Další příklady

Příklad

Použijte CSS ke stylu <details> a <summary>:

<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>

Související stránky

HTML DOM reference: Details Object


Výchozí nastavení CSS

Většina prohlížečů zobrazí <details>prvek s následujícími výchozími hodnotami:

details {
  display: block;
}