Element HTML details reprezentuje interaktywny widżet, który użytkownik może rozwinąć, aby wyświetlić ukrytą w nim treść – tekst, grafikę, film itd.
Domyślnie widżet jest zamknięty, o czym świadczy mały trójkąt skierowany w prawo. Gdy użytkownik go kliknie, trójkąt obraca się wierzchołkiem w dół i pojawia się treść zawarta w elemencie. To domyślne zachowanie można zmienić za pomocą atrybutu open.
Pierwszy element potomny summary reprezentuje etykietę lub legendę. Jeśli go nie ma, przeglądarka wyświetla standardowy tekst, np. Chrome wyświetla napis Szczegóły (zobacz przykłady użycia elementu details).
Przykład użycia elementu HTML menu
Domyślnie zamknięty element details
<details>
<summary>Pokaż dane</summary>
<p>Oto zestawienie danych za wrzesień…</p>
</details>Wynik
Pokaż dane
Oto zestawienie danych za wrzesień…
Domyślnie otwarty element details
<details open>
<summary>Pokaż dane</summary>
<p>Oto zestawienie danych za wrzesień…</p>
</details>Wynik
Pokaż dane
Oto zestawienie danych za wrzesień…
Kontekst użycia
| Elementy nadrzędne | Elementy treści syntagmatycznej |
|---|---|
| Elementy potomne | Jeden element summary i elementy treści syntagmatycznej |
| Znaczniki | Znaczniki otwierający i zamykający są obowiązkowe |
| Interfejs DOM | HTMLDetailsElement |
Atrybuty obowiązkowe
Element details nie ma atrybutów obowiązkowych.
Atrybuty opcjonalne
Element details obsługuje atrybuty globalne i atrybuty zdarzeniowe.
Dodatkowo element details obsługuje atrybut logiczny open, który sprawia, że domyślnie zawartość widżetu jest widoczna.