<details>

Element <details> w języku HTML jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.

Kategoria treści	Flow content, root sekcji, treść interaktywna, treść klikalna.
Dopuszczalna zawartość	Jeden element <summary> (en-US) będący bezpośrednim pierwszym dzieckiem
Znaczniki pomijane	None, both the starting and ending tag are mandatory.
Dopuszczalni rodzice	Dowolny element flow content.
Rola ARIA	Brak
Interfejs w DOM	`HTMLDetailsElement` (en-US)

Atrybuty

Istnieje możliwość dopisania do elementu atrybutów globalnych.

open: Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość false mówiąca elementowi, aby był zamknięty.

Przykład

<details>
  <summary>Szczypta detali</summary>
  <p>Informacje szczegółowe na dany temat.</p>
</details>

<details open>
  <summary>Jeszcze wiecej szczegółów</summary>
  <p>Tu jest jeszcze wiecej informacji szczegółowych</p>
</details>

Rezultat

Note: Jeżeli rezultat nie działa u Ciebie poprawnie, zobacz kompatybilność z przeglądarkami, aby sprawdzić, czy Twoja przegladarka wspiera ten element.

Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako display: list-item przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają ::-webkit-details-marker pseudo element, który może być stylowany.

Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez summary { display: block }, a z kolei Chrome i Safari poprzez ::-webkit-details-marker {display: none;}. Stylowanie może być wtedy odpowiednio przeprowadzone.
Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia

HTML

<details>
  <summary>Szczypta detali</summary>
  <p>Informacje szczegółowe na dany temat.</p>
</details>

CSS

summary {
  display: block;
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

Rezultat

Specyfikacja

Specification	Status	Comment
HTML Living Standard The definition of '<details>' in that specification.	Living Standard
HTML 5.1 The definition of '<details>' in that specification.	Recommendation	Początkowa definicja

Kompatybilność z przeglądarkami

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Pulpit
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	12	In Development	49.0 (49.0)	No support	15	6

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.0	In Development	49.0 (49.0)	No support	No support	6.1

Zobacz także

<summary> (en-US)