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

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

Autorzy i etykiety dokumentu

 Autorzy tej strony: PawelekS
 Ostatnia aktualizacja: PawelekS,