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

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ędneElementy treści syntagmatycznej
Elementy potomneJeden element summary i elementy treści syntagmatycznej
ZnacznikiZnaczniki otwierający i zamykający są obowiązkowe
Interfejs DOMHTMLDetailsElement

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.

Podobał Ci się ten artykuł?

Oceń go!

Średnia 5 / 5. Liczba głosów: 1

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

Jajko z dzwonkiem
Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Dodaj komentarz

14 + 1 =