Text ein- aufklappen mit HTML

aktualisiert am 30.01.2020 Ditmar

Anstatt mit jQuery & Co kann man mit HTML Text ein- oder aufklappen.

HTML-Auszeichnung

<details> und <summary>

Der Text ist beim Besuch der Seite aufgeklappt, HTML Elemente:

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

Die Darstellung:

Text einklappen

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

Der Text ist beim Besuch der Seite 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.

Die richtige 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:

summary:focus {
outline: none;
}

Bilddatei ein- bzw. ausklappen:

Ebenso lässt sich eine Bilddatei ein- bzw. ausklappen: Im „Text“ Editor zwischen entsprechenden HTML-Elementen ein Bild anstatt des Text einfü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

Überflüssige Leerzeilen durch Code  

Geschütztes Leerzeichen
Schmales Leerzeichen

In Zusammenhang dem Abspeichern des HTML-Elements folgt der Code  . Dadurch entsteht eine Leerzeile. Hierdurch rutscht der folgende Text nicht nach.

Das Zeichen   macht hier aber Missfallen, da es durch Abspeichern im Modus „Visuell“ nach jeweiligem Abspeichern eine Leerzeile einfügt. Des Abspeichern im Textmodus lässt sich das bei einmaligen Speichern einrichten, aber auch nach nochmaligen Speichern (also ohne weitere Änderung) wiederum durch Code   die doppelten Leerzeilen vorhanden sind. Und nach jedem abspeichern vermehren sich diese und der Löschvorgang muss wiederholt werden. Nun möchte man meinen: Im Modus „Text“ nach einer Änderung nur einmal Abspeichern und das gewollte Layout bleibt wie angelegt.

Nein – also! – Start-Tag <div> vor Start-Tag <details>.

Schablone:

<div><details> <summary><strong>Hinweis</strong></summary>
<div style="margin-top: 12px;">Text Text Text</div>
</details></div>
&nbsp;

… eventuell unter </details></div> das   anfügen. Aber wenn nächst eine Überschrift ist, eher kein  

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