<details>
Rozwijana sekcja: nagłówek `<summary>` widać zawsze, a resztę treści po kliknięciu.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Jeden element
<summary>, a po nim treść przepływu
Przykład
#<details>
<summary>Podpowiedź do zadania</summary>
<p>Pamiętaj, że element <code><img></code> nie ma znacznika zamykającego.</p>
</details>
<details>
<summary>Pokaż rozwiązanie</summary>
<pre><code><img src="kot.jpg" alt="Rudy kot śpi na parapecie"></code></pre>
</details>Definicja i zastosowanie
#Element <details> tworzy widżet rozwijania bez jednej linijki JavaScriptu. Zawsze widoczny jest tylko jego pierwszy element <summary>, a pozostała treść pojawia się po kliknięciu albo po naciśnięciu Enter lub spacji. To dobre rozwiązanie dla FAQ, podpowiedzi do zadań, rozwiązań do sprawdzenia i szczegółów technicznych.
Atrybut open decyduje, czy sekcja jest rozwinięta. Przeglądarka sama dodaje go i usuwa przy każdym kliknięciu, a Ty możesz ustawić go w kodzie, żeby sekcja była otwarta na starcie. Każda zmiana stanu wywołuje zdarzenie toggle.
Kilka elementów <details> z tym samym atrybutem name tworzy akordeon: otwarcie jednej sekcji automatycznie zamyka pozostałe. Czytniki ekranu ogłaszają <summary> jako przycisk i informują, czy sekcja jest rozwinięta, czy zwinięta.
Składnia
#<details>
<summary>Nagłówek</summary>
Ukryta treść…
</details>Atrybuty
#atrybut logiczny
Sekcja jest rozwinięta. Ustaw go w kodzie, żeby treść była widoczna od razu, na przykład w pierwszym pytaniu FAQ.tekst
Łączy kilka elementów<details>w grupę, w której naraz może być otwarty tylko jeden. Działa we wszystkich głównych przeglądarkach od 2024 roku.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#open
atrybut logicznySekcja jest rozwinięta. Ustaw go w kodzie, żeby treść była widoczna od razu, na przykład w pierwszym pytaniu FAQ.
<details open>
<summary>Ile czasu dziennie się uczyć?</summary>
<p>Regularność jest ważniejsza niż długość sesji. Na start wystarczy pół godziny dziennie.</p>
</details>name
tekstŁączy kilka elementów <details> w grupę, w której naraz może być otwarty tylko jeden. Działa we wszystkich głównych przeglądarkach od 2024 roku.
<details name="faq" open>
<summary>Od czego zacząć naukę?</summary>
<p>Od HTML i CSS, bo efekty widać od razu w przeglądarce.</p>
</details>
<details name="faq">
<summary>Czy muszę znać angielski?</summary>
<p>Pomaga, ale na start nie jest konieczny.</p>
</details>
<details name="faq">
<summary>Na jakim komputerze się uczyć?</summary>
<p>Wystarczy dowolny komputer z nowoczesną przeglądarką.</p>
</details>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
details {
display: block;
}
details > summary:first-of-type {
display: list-item;
list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
list-style-type: disclosure-open;
}Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie chowaj w
<details>treści, którą każdy musi przeczytać. Zwinięte sekcje łatwo przeoczyć. - Stan sekcji odczytasz i zmienisz w JavaScripcie przez właściwość
open, a na zmiany zareagujesz w zdarzeniutoggle. - Przeglądarka sama obsługuje klawiaturę i informuje czytniki ekranu o stanie sekcji. Nie dodawaj do
<summary>własnych ról ani atrybutuaria-expanded.
Powiązane hasła
#- <summary>Zawsze widoczny nagłówek elementu `<details>`, który rozwija i zwija treść.
- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.