HTML details und dialog – interaktive Elemente

details und dialog sind interaktive Elemente, die zusätzliche Informationen kompakt darstellen, bis der Besucher sie mit einem Klick oder Touch anzeigt. Weil sie schon mit einfachem HTML funktionieren, sind sie ein passendes Extra für die kleinen Monitore der mobilen Geräte.

HTML details und summery

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.

Neue HTML-Tags – details

Informationen, die der Benutzer aufklapen kann

HTML details- und summary-Elemente sind für kleine Zusammenfassungen gedacht, die der Benutzer anzeigen oder verbergen kann.

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;
}
Details weich öffnen

Der Nachteil des weichen Öffnens: Die Höhe des Inhalts muss im Vorhinein bekannt sein.

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.

Das dialog-Element braucht JavaScript, um seine Meldungen auszuspielen und um das modale Fenster wieder zu schließen.

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

Suchen auf mediaevent.de