Tag <details>

Tag <details>

Definition

Status: Aktueller Standard

Das Tag <details> steht für details (Details, weiter unterteilt).

Das <details>-Element erzeugt ein interaktives Ein-/Ausklapp-Widget (Disclosure Widget). Nutzer können Inhalte sichtbar oder verborgen schalten und es benötigt hierfür kein JavaScript.

Syntax

<details>
  <summary>...</summary>
  ...
</details>

Attribute bzw. Unterelemente

open

Zeigt beim Laden details geöffnet an

name

Haben mehrere details den gleichen Namen ist immer nur einer geöffnet

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <details> - ---

Der Code:

   <details name="test">
      <summary>Erstes Detail</summary>
      <p>Da beide Details den gleichen Namen haben ist
        immer nur ein Details geöffnet...</p>
    </details>

    <details name="test">
      <summary>Zweites Detail</summary>
      <p>Da beide Details den gleichen Namen haben ist
        immer nur ein Details geöffnet...</p>
    </details>

Ergebnis:

Ergebnis: <details>-Demo 1
---

Beide Container haben den Namen "test" und öffnen/schliessen sich daher gegenseitig. Ohne diesem Umstand könnte man jeden Container für sich öffnen/schliessen.