Text ein- aufklappen –
„Spielerei“ in HTML

Folgende Formatierung spricht nur die Browser Chrome, Safari und Opera an.

Der Text beim Besuch der Seite ist aufgeklappt, HTML Elemente:
<details open="+"><summary><strong>Text einklappen</strong></summary>bzw. ausklappen funktioniert auch in HTML, siehe selfhtml.wiki</details>

Dargestellt:

Text einklappen

bzw. aufklappen funktioniert auch in HTML, siehe selfhtml.wiki
(Der Link ist natürlich extra einzusetzen.)

Der Text beim Besuch der Seite ist eingeklappt, HTML Elemente:
<details><summary><strong>Text ausklappen</strong></summary>bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki</details>

Dargestellt:

Text ausklappen

bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki
(Der Link ist natürlich extra einzusetzen.)

Bilddatei ein- bzw. ausklappen:

Ebenso einfach lässt sich eine Bilddatei ein- bzw. ausklappen: In „Visuell“ oder „Text“ Editor ein Bild einfügen, danach den Bildcode im Texteditor kopieren und zwischen entsprechenden HTML-Elementen anstatt eines Textes hinzufügen. – Somit mag mal die Einstellung „ausklappen“ bei Besuchern auch das Bedürfnis heben, zu sehen, welches Bild sich verbergen mag. Mit voran <div style="text-align: center;"> die gewollte Ausrichtung des Textes.

<div style="text-align: center;"><details> <summary><em>Klick</em></summary><img class="alignright size-medium wp-image-1227" src="http://wegerl.at/wordpress/wp-content/uploads/2015/08/image27-300x172.jpg" alt="image" width="300" height="172" /></details></div>
Beispiel-Klick

image

Überflüssige Leerzeilen durch Code &nbsp;

Auf Folgendes bin ich über die HTML-Elemente „Text ein- bzw. ausklappen“ gestoßen, alldieweil Speichern der Code &nbsp; hier eine Leerzeile einfügt. Diese Leerzeile ist konform, da hierdurch nach dem einklappen, der nachfolgende Text nicht (wie) ersetzt oder ausgewechselt vom gewollt ausgekappten Text dargestellt wird.

Das Zeichen macht hier aber sozusagen Missfallen, weil es ungewollt im Modus „Visuell“ nach jeweiligem Abspeichern überflüssige Leerzeile einfügt. Wobei sich das im Textmodus nach Löschung der ungewollten Code (Leerzeilen), sich bei einmaligen Speichern einrichten lässt, aber auch nach nochmaligen Speichern (also ohne weitere Änderung) wiederum durch Code &nbsp Leerzeilen vorhanden sind und sich nach weiteren speichern vermehren und der Löschvorgang jeweils wiederholt sein muss.

Also im Modus „Text“ nach einer Änderung nur einmal Abspeichern und das gewollte Layout bleibt wie angelegt.

Oder – einfach den Start-Tag <div> vor dem Start-Tag <details> einsetzen:

<div><details><summary><strong>Text ausklappen</strong></summary>bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki</details></div>