CodePen Home Pure CSS Details Interaction #CodepenChallenge Bar Hatsor

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:

Wie erstelle ich denn ein Akkordeon?

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

Ich bin ein Akkordeon! Klick mich!

Und hier kommt ein Text oder eine Liste oder ein Bild oder ein Video oder, oder …

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:

Beispiel aufklappbarer Textteile mittels <device> and <summary>

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.

Quelltext eines Beitrags in Joomla 4
Anzeige in der WYSIWYG-Vorschau des Editors

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


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


Beitrag veröffentlicht

in

,

von

Schlagwörter:

Kommentare

5 Antworten zu „Auf- und Zuklappen von Textteilen mit einfachen HTML5-Befehlen“

  1. Avatar von Bernd
    Bernd

    Cool, Danke!!!

  2. […] ich letzte Woche mit HTML 5 eher zufällig ein wenig auf- und zugeklappt habe, erhielt ich eine überraschende Menge Feedback zum Thema „Textformatierung“ auf […]

  3. […] für Benutzerwünsche in Projekten ja sind immer gefragt. Als es neulich hier im Blog um das Auf- und Zuklappen von Textteilen mit einfachen HTML 5 Befehlen ging, stellte sich prompt die […]

  4. Avatar von trusted blogs

    Dieser Article wurde erwähnt auf brid.gy

  5. Avatar von FraWoh
    FraWoh

    Vielen Dank für den Artikel. Hat mir viel Arbeit erspart und die reine HTML5-Lösung ist nun viel schlanker und übersichtlicher zu stylen (CSS) als meine zuvor genutzte JS-Lösung!
    Bin begeistert 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert