Elementy interaktywne

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>

1. Poprawa doświadczenia użytkownika: użytkownicy mogą sami kontrolować, którą zawartość chcą zobaczyć.
2. Oszczędność miejsca: ukrywanie dużej ilości informacji za interaktywnymi nagłówkami.
3. 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>