Das details-Tag

Das Tag details erstellt einen Spoiler in HTML, d.h. es wird für Informationen verwendet, die nach Benutzerwunsch ausgeblendet oder angezeigt werden können.

Standardmäßig ist der Inhalt des Tags ausgeblendet. Um ihn auf Benutzerwunsch anzuzeigen, sollte das Tag summary hinzugefügt werden, das eine Überschrift für das Tag details angibt. Diese Überschrift ist immer auf der Seite sichtbar (selbst wenn der Inhalt von details eingeklappt ist) und kann angeklickt werden, um den ausgeblendeten Text auszuklappen oder wieder einzuklappen.

Um den ausgeblendeten Inhalt anzuzeigen, kann auch das Attribut open des Tags details verwendet werden (zum Beispiel, um den Inhalt von details mit JavaScript anzuzeigen).

Beispiel

Sehen wir uns an, wie das Tag details funktioniert:

html<details>
  <summary>click me</summary>
  hidden text
</details>

Результат:

Siehe auch