Sektionen zum Ein- und Ausklappen ohne JavaScript und in Markdown nutzen

in  Basics , , , ,

Sektionen zum Ein- und Ausklappen ohne JavaScript und in Markdown nutzen

Der HTML5-Standard bietet einige Tags, mit denen sich interaktive Elemente abbilden lassen. Ein sehr nützliches Beispiel sind die Tags <details> und <summary>: sie erlauben die Erstellung von aufklappbaren Bereichen. Früher konnten solche Funktionen zum dynamischen Öffnen und Schließen von Teilbereichen nur mit Hilfe von JavaScript umgesetzt werden. Diese Einschränkung ist somit entfallen.

In diesem Beitrag wird kurz gezeigt, wie sich die zwei Tags einsetzen lassen. Außerdem wird die Verwendung anhand eines praktischen Anwendungsfalls demonstriert.

Das <details>-Tag markiert einen Block semantisch dahingehend, dass er weitere Detailinformationen enthält. Das darin enthaltene <summary>-Tag gibt eine kurze Zusammenfassung der (in der Regel nicht unmittelbar sichtbaren) Details an.

1
2
3
4
<details>
    <summary>Zusammenfassung</summary>
    Hier kommt der Inhalt.
</details>

Dies sieht dann (ohne spezielles CSS) so aus:

Zusammenfassung Hier kommt der Inhalt.


Der Inhalt kann im Prinzip beliebiges HTML umfassen, zum Beispiel Tabellen oder auch weitere <details>-Blöcke.

Das <details>-Tag kann auch ein optionales open-Attribut enthalten, um anzugeben, dass der entsprechende Block per Standard geöffnet dargestellt werden soll.

1
2
3
4
<details open>
    <summary>Offener Bereich</summary>
    Dieser Inhalt ist direkt zu sehen.
</details>
Offener Bereich Dieser Inhalt ist direkt zu sehen.


Ein paar weiterführende Beispiele für die möglichen Optionen, zur Verwendung und zur Gestaltung finden sich in diesen Beiträgen:

Besonders interessant ist der Vorteil, dass dieser Mechanismus komplett ohne JavaScript auskommt. Das macht ihn auch nutzbar für Bereiche, in denen die Verwendung eigener Skripte nicht möglich ist. Hierzu zählen auch Markdown-Dokumente. Wichtig ist nur, dass in HTML-Tags enthaltenes Markdown durch eine Leerzeile abgetrennt wird, damit es weiterhin interpretiert wird.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<details>
    <summary>

        ### Eine Überschrift

    </summary>
    <div>

        Test **mit Markdown**.

    </div>
</details>

Gerendert führt das zu folgender Ausgabe:

Eine Überschrift

Test mit Markdown.


Wir haben dies sowohl in GitHub- als auch GitLab-Repositories erfolgreich im Einsatz.

Weitere Beiträge in Kategorie Basics

Optische Varianzen mit SCSS-Maps umsetzen
- In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, …
Git spielend im Griff
- Eine schöne interaktive Möglichkeit, einige Konzepte von Git näher kennen zu lernen, bietet die Seite Learn Git Branching. In diesem Spiel werden in unterschiedlichen Tutorials und Aufgaben die …
Lesetipp: das Buch zu Symfony 5 auf deutsch
- Das Buch “Symfony 5: The Fast Track” von Fabian Potencier zeigt anhand praktischer Beispiele einen großen Teil der Bandbreite der Symfony-Komponenten. Es eignet sich daher für einen …
CSS-Konzepte spielerisch lernen
- Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von …
Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt
- Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu …