Text ein- aufklappen –
„Spielerei“ in HTML

Anstatt mit jQuery & Co kann man ganz
einfach mit HTML, Text ein- aufklappen

… fix zur Schablone ↓

HTML-Auszeichnung <details> und <summary>

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>

Darstellung:

Text einklappen

bzw. aufklappen funktioniert auch in HTML, siehe selfhtml.wik – beste Beschreibung.

Der Text beim Besuch der Seite ist eingeklappt + Zeilenabstand:

<details><summary><strong>Text ausklappen</strong></summary><div style="margin-top: 12px;">bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki</div></details>
&nbsp;

… gewisse Browser …

Ein Zeilenabstand ließe sich über CSS einrichten, aber bei nochmaligen klick in den Bildschirm rückt der Text wieder nach oben.

Darstellung:

Text ausklappen
bzw. einklappen funktioniert auch in HTML, siehe html-seminar.de – beste und feine Beschreibung.

 

… gewisse Browser zeigen Rahmen um „Text aus- einklappen“, welcher mit CSS aufzulösen ist, s. html-seminar.de:

summary:focus {
outline: none;
}

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="https://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;

Geschütztes Leerzeichen
Schmales Leerzeichen

Auf Folgendes bin ich über die HTML-Elemente „Text ein- bzw. ausklappen“ gestoßen: Beim Abspeichern wird in diesem Zusammenhang der Code &nbsp; erzeugt und dadurch 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, da 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; doppelte Leerzeilen vorhanden sind und sich nach weiteren speichern vermehren und der Löschvorgang jeweils wiederholt sein muss.

Nun möchte man meinen: im Modus „Text“ nach einer Änderung nur einmal Abspeichern und das gewollte Layout bleibt wie angelegt.

Also – Start-Tag <div> vor Start-Tag <details> einsetzen –

Schablone:

<div><details> <summary><strong>Text ausklappen</strong></summary>
<div style="margin-top: 12px;">bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki</div>
</details></div>
&nbsp;

Text Text Text

eventuell unter </details></div> ein &nbsp; anfügen. Aber wenn nächst eine Überschrift folgt, eher kein &nbsp;

Noch ein Übungsbeispiel:

<div style="text-align: right;"><details> <summary><em>Kunstversuch</em></summary>&nbsp;

<img class="aligncenter size-full wp-image-1232" src="https://kulturmodell.wegerl.at/wp-content/uploads/2015/08/image32.jpg" alt="" width="208" height="180" />

</details></div>
&nbsp;
<p style="text-align: right;"><sup>Jahr 2018</sup></p>
Kunstversuch

 

 

Jahr 2018