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

Das Buch zu Symfony ist in einer neuen Version erschienen
- Bereits im Jahr 2020 haben wir das Buch “Symfony: The Fast Track” hier vorgestellt. Nun ist eine neue Auflage bereitgestellt worden, welche auf den Stand für Symfony 5.4 und 6.0 gebracht …
Symfony und API Platform starten offiziellen Docker-Support
- Seit knapp einem Monat steht eine umfangreiche Unterstützung zur Docker-basierten Arbeit mit Symfony bereit. Hierbei gibt es Neuerungen in mehreren zentralen Werkzeugen, die ineinander greifen und …
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 …