HTML details und dialog – interaktive Elemente

details und summary

HTML details umschließt ein Detail oder Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü. Browser, die details unterstützen, zeigen ein Dreieck (Marker) als Zeichen, dass weitere Informationen vorhanden sind.

Das summary-Tag ist der sichtbare Kopf – die Zusammenfassung oder Überschrift des details-Elements –, der auf den Klick oder Touch reagiert und weitere Informationen freigibt.

details hat ein individuelles HTML-Attribut: open gibt an, ob details geöffnet oder geschlossen an den Benutzer übertragen wird. Mit dem open-Attribut weist details den Browser an, den Inhalt zunächst geöffnet zu zeigen und dem Benutzer eine Chance zu geben, das details-Tag zu schließen

<details>
    <summary>Neue HTML-Tags – details</summary>
    <p>Informationen, die der Benutzer aufklapen kann</p>
    <p>section</p>
    <p>header</p>
    <p>footer</p>
</details>

details und summary werden von allen modernen Browsern unterstützt (nicht IE). Browser, die details nicht unterstützen, zeigen den details-Bereich geöffnet an. Aber Achtung! Wenn die Webseite gedruckt oder als PDF gespeichert wird, bleibt das details-Element geschlossen.

details weich und sanft öffnen

Für ein weiches Öffnen und Schließen braucht das details-Elements eine Höhe und die CSS transition-Eigenschaft. Das macht das details-Element weniger flexibel.

details#smooth { height: 20px; }
details#smooth[open] { height: 120px; }
details[open] {padding-bottom: 30px;}

details#smooth, details#smooth .content {
	transition: height 0.6s ease-in-out;
}

dialog-Tag

Das dialog-Element erzeugt ein modales Dialogfenster für Nachrichten, Warnungen oder für die Interaktion mit dem Benutzer. Ein »modales Fenster« ist ein Popup oder Overlay und wirkt, als wäre das Fenster absolut positioniert. Der nachfolgende Inhalt bleibt an seinem Platz, der Inhalt des dialog-Elements legt sich über die vertikale und horizontale Mitte des Browserfensters und verdrängt nachfolgenden Inhalte nicht.

<button id="openBtn">Es gibt neue Nachrichten!</button>
<dialog>
	<p>Das dialog-Element …</p>
	<button id="closeBtn">Schließen</button>
</dialog>

Per Vorgabe zeigen die Browser das Dialog-Element in einem schwarzen Rahmen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.

Das Skript ist kurz und einfach. JavaScript showModal() öffnet das dialog-Element, close() schließt es.

<script>
const dialog = document.querySelector('dialog');
const open = document.getElementById('openBtn');
const close = document.getElementById('closeBtn');

open.addEventListener('click', () => {
	dialog.showModal();
});

close.addEventListener('click', () => {
	dialog.close();
});
</script>

Der Benutzer kann zwar noch scrollen, aber nicht mehr mit anderen interaktiven Elementen interagieren.

Alternativ zu showModal() würde JavaScript show() das dialog-Element zwar ebenfalls öffnen und bis zu einem Klick auf den Schließen-Button geöffnet halten, aber das dialog-Fenster mitbewegt, wenn die Seite gescrollt wird, und andere interaktive Elemente behalten ihre Funktion.