6.1 Tag <details>
HTML5 dodał elementy <details> i <summary>, stworzone do tworzenia interaktywnych rozwijalnych bloków. Te elementy pozwalają użytkownikom rozwijać i zwijać zawartość, co poprawia interakcję z użytkownikiem i oszczędza miejsce na stronie internetowej.
Element <details> używany jest do tworzenia bloku, który można rozwinąć lub zwinąć. W środku można umieszczać dowolną zawartość HTML. Po rozwinięciu <details> pokazuje się osadzona treść, a po zwinięciu — znika.
Składnia:
<details>
<summary>Nagłówek</summary>
<!-- Ukryta zawartość -->
</details>
Atrybut open:
Jeśli atrybut jest obecny, blok <details> będzie rozwinięty domyślnie.
Przykład użycia <details>
<details open>
<summary>Podstawowe informacje</summary>
<p>Ta informacja jest widoczna domyślnie, ponieważ atrybut open jest ustawiony.</p>
</details>
Wyjaśnienie
<details>: tworzy kontener dla ukrytej zawartości.<summary>: definiuje nagłówek, który jest zawsze widoczny i można na niego kliknąć, aby rozwinąć lub zwinąć zawartość.
6.2 Tag <summary>
Element <sumary> używany jest wewnątrz <details> do tworzenia nagłówka. Nagłówek ten zawsze jest widoczny i służy jako element kontrolny do rozwijania lub zwijania zawartości bloku <details>.
Składnia:
<details>
<summary>Nagłówek</summary>
<!-- Ukryta zawartość -->
</details>
Przykład użycia:
<details>
<summary>Więcej szczegółów</summary>
<p>To ukryta zawartość, która staje się widoczna po rozwinięciu bloku.</p>
</details>
Zalety używania <details> i <summary>
- Poprawa doświadczenia użytkownika: użytkownicy mogą sami kontrolować, którą zawartość chcą zobaczyć.
- Oszczędność miejsca: ukrywanie dużej ilości informacji za interaktywnymi nagłówkami.
- Semantyczne formatowanie: poprawa struktury dokumentu HTML i jego dostępności dla użytkowników i wyszukiwarek.
6.3 Interakcja z JavaScript
Elementy <details> i <sumary> można łatwo kontrolować za pomocą JavaScript do tworzenia bardziej interaktywnych stron internetowych.
Przykład użycia JavaScript:
<details>
<summary>Więcej szczegółów</summary>
<p>To ukryta zawartość, która staje się widoczna po rozwinięciu bloku.</p>
</details>
<details open>
<summary>Podstawowe informacje</summary>
<p>Ta informacja jest widoczna domyślnie, ponieważ atrybut open jest ustawiony.</p>
</details>
<button id="toggleDetails">Zwiń/rozwiń</button>
// Znajdujemy przycisk z id 'toggleDetails' i dodajemy handler do eventu 'click'
document.getElementById('toggleDetails').addEventListener('click', () => {
// Znajdujemy wszystkie elementy 'details' na stronie
document.querySelectorAll('details').forEach(detail => {
// Odwracamy wartość właściwości 'open' każdego elementu 'details'
detail.open = !detail.open;
});
});
Wyjaśnienie:
- Przycisk "Zwiń/rozwiń": zarządza stanem wszystkich elementów
<details>na stronie - Event click: przełącza atrybut open dla wszystkich elementów
<details>
GO TO FULL VERSION