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

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

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

Kompatybilność z przeglądarkami

Zobacz także

• <summary>