Interaktive Elemente

6.1 Tag <details>

HTML5 hat die Elemente <details> und <summary> hinzugefügt, die für die Erstellung interaktiver Dropdown-Blöcke gedacht sind. Diese Elemente ermöglichen es den Benutzern, Inhalte ein- und auszublenden, was die Benutzererfahrung verbessert und Platz auf der Webseite spart.

Das Element <details> wird verwendet, um einen Block zu erstellen, den man ein- oder ausklappen kann. Innerhalb davon kann beliebiger HTML-Inhalt platziert werden. Beim Ausklappen von <details> wird der eingebettete Inhalt angezeigt und beim Einklappen wird er ausgeblendet.

Syntax:

    
      <details>
        <summary>Überschrift</summary>
        <!-- Verborgener Inhalt -->
      </details>
    
  

Attribut open:

Wenn das Attribut vorhanden ist, wird der Block <details> standardmäßig ausgeklappt.

Beispiel für die Nutzung von <details>

    
      <details open>
        <summary>Hauptinformation</summary>
        <p>Diese Information ist standardmäßig sichtbar, da das Attribut open gesetzt ist.</p>
      </details>
    
  

Erklärung

• <details>: erstellt einen Container für verborgenen Inhalt.
• <summary>: definiert die Überschrift, die immer sichtbar ist und angeklickt werden kann, um den Inhalt ein- oder auszublenden.

6.2 Tag <summary>

Das Element <summary> wird innerhalb von <details> verwendet, um eine Überschrift zu erstellen. Diese Überschrift ist immer sichtbar und dient als Steuerungselement zum Ein- oder Ausklappen des Inhaltsblocks <details>.

Syntax:

    
      <details>
        <summary>Überschrift</summary>
        <!-- Verborgener Inhalt -->
      </details>
    
  

Beispiel für die Nutzung:

    
      <details>
        <summary>Mehr erfahren</summary>
        <p>Dies ist ein verborgener Inhalt, der sichtbar wird, wenn der Block ausgeklappt wird.</p>
      </details>
    
  

Vorteile der Verwendung von <details> und <summary>

1. Verbesserung der Benutzererfahrung: Benutzer können selbst steuern, welchen Inhalt sie sehen möchten.
2. Platzersparnis: Verbergen einer großen Menge an Informationen hinter interaktiven Überschriften.
3. Semantische Markierung: Verbesserung der Struktur des HTML-Dokuments und seiner Zugänglichkeit für Benutzer und Suchmaschinen.

6.3 Interaktion mit JavaScript

Die Elemente <details> und <summary> können einfach mit JavaScript gesteuert werden, um interaktivere Webseiten zu erstellen.

Beispiel für die Nutzung von JavaScript:

    
      <details>
        <summary>Mehr erfahren</summary>
        <p>Dies ist ein verborgener Inhalt, der sichtbar wird, wenn der Block ausgeklappt wird.</p>
      </details>
      <details open>
        <summary>Hauptinformation</summary>
        <p>Diese Information ist standardmäßig sichtbar, da das Attribut open gesetzt ist.</p>
      </details>
      <button id="toggleDetails">Ein-/Ausklappen</button>
    
  

    
      // Wir finden den Button mit der id 'toggleDetails' und fügen einen Event-Handler für 'click' hinzu
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Wir finden alle 'details'-Elemente auf der Seite
        document.querySelectorAll('details').forEach(detail => {
          // Wir invertieren den Wert der Eigenschaft 'open' jedes 'details'-Elements
          detail.open = !detail.open; 
        });
      });
    
  

Erklärung:

• Button "Ein-/Ausklappen": steuert den Zustand aller <details>-Elemente auf der Seite
• Click-Ereignis: schaltet das open-Attribut für alle <details>-Elemente um