CodeGym/Kurse/Frontend SELF DE/Interaktive Elemente

Interaktive Elemente

Verfügbar

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:

HTML
<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>

HTML
<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:

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

Beispiel für die Nutzung:

HTML
<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:

HTML
<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>
JavaScript
// 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
1
Aufgabe
Frontend SELF DE,  Level 10Lektion 6
Gesperrt
Aufklappbarer Block
Aufklappbarer Block
1
Aufgabe
Frontend SELF DE,  Level 10Lektion 6
Gesperrt
Interaktiver Block
Interaktiver Block
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare