Element details

> Dodaj do ulubionych |
Share

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.