Auf- und Zuklappen von Textteilen mit einfachen HTML5-Befehlen

Ein immerwährender Quell hochinteressanter Diskussionen über Textformatierungen unter Nutzern von Content-Management-Systemen wie WordPress, Joomla und Drupal ist beispielsweise die Frage:

Ein „Akkordeon“ ist so ein Textgebilde, bei dem ein Text auf- und zugeklappt werden kann.

Vor der Einführung von HTML 5 war so ein Text-Klappmechanismus nur mit Hilfe von JavaScript realisierbar.

Oft gab es dafür separate Erweiterungen, die diese Funktionalität zur Verfügung stellten. Es war aber immer kompliziert, das einfach so in einem Editor zu verwenden.

In HTML5 wurden bereits im Jahr 2014 die interaktiven Befehle <details> und <summary> definiert, die genau diesen Aufklappmechanismus implementieren.

Das Beispiel oben sieht als HTML Code folgendermassen aus:

<details>
  <summary>Ich bin ein Akkordeon! Klick mich!</summary>
  <p>Und hier kommt ein Text oder eine Liste oder ein Bild oder ein Video oder, oder ...</p>
</details>

WordPress

Dieser Blog-Post wird in einer WordPress Installation erstellt. Ich nutze den Gutenberg-Editor und der <details> und <summary> Befehl lässt sich leider nicht einfach so benutzen.

Glücklicherweise gibt es ein Plugin (JVM Details & Summary), das einen entsprechenden Gutenberg-Block bereitstellt. Der Block funktioniert (Beispiel siehe oben), aber so richtig leicht geht die Bedienung nicht von der Hand. So sieht der Quelltext im Code-Editor aus

Drupal

Drupal nutzt das Konzept von Textformaten. In der Konfiguration des Feldes wird definiert, welche Textformate man nutzen darf. Die beiden HTML5 Befehle können in eingeschränkten Formaten manuell erlaubt werden oder man wählt das Full HTML-Format, in dem alle HTML-Befehle erlaubt sind.

<details>
<summary>Zusammenfassung Punkt 1</summary>
<p>Hier kommt der ausführliche Inhalt zum Punkt 1</p>
</details>

<details>
<summary>Nachhaltige Entwicklung in der Schweiz</summary>
<ul>
<li>Artikel 2 («Zweck») ...</li>
<li>In der ...</li>
</ul>
</details>

Im Ergebnis sieht das dann im Screenshot folgendermassen aus:

Du benötigst keine zusätzlichen Erweiterungen in Drupal.

Joomla

Auch in Joomla lassen sich die HTML5-Befehle einfach über die Quellcode-Ansicht im Beitrag einfügen. In der Ansicht des Beitrags ist der Bereich dann auf- und zugklappbar.

CSS- und JS-Erweiterungen

Wer will, kann natürlich per CSS und JavaScript die Eigenschaften und Optik verfeinern.

Hier ein paar Beispiele:

Einfaches HTML, wie oben beschrieben, aber mit CSS

Eine interessante Variante (HTML und CSS), die das Akkordeon aussehen lässt wie einen modalen Dialog.

Eine elegante Variante mit klappbaren „Kreuzchen“ …

Und zum Schluss noch die Nerd-Variante mit einem programmierten SVG-Bild 🙂
Alles mit HTML und CSS, ohne JavaScript!

Fazit

Das Charmante an diesen HTML5-Befehlen ist unter anderem, dass sie sich beliebig verschachteln lassen. Im Detailbereich können weitere Summaries stehen und natürlich auch andere HTML-Befehle wie Listen.

Die Bereiche können auch so konfiguriert werden, dass sie standardmässig geschlossen oder offen sind. Und natürlich kann alles per CSS „on the fly“ verfeinert werden.

Links

• https://de.wikipedia.org/wiki/HTML5
• https://www.html-seminar.de/html-befehle-details-summary.htm
• https://wiki.selfhtml.org/wiki/HTML/Tutorials/details
• https://freefrontend.com/html-details-summary-css/

tl;dr: Das Gute liegt so nahe – mit HTML5!