Element details

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

Domyślnie otwarty element details

<details open>
  <summary>Pokaż dane</summary>
  <p>Oto zestawienie danych za wrzesień…</p>
</details>

Wynik

Kontekst użycia

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.