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

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.

Przykład z ostylowaniem

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!

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