Text auf- / einklappen mit HTML

Anstatt mit jQuery & Co kann man mit HTML5 Text auf- / einklappen.

… und fix zur Schablone ↓

HTML5-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 + Abstand:

<details><summary><strong>Text ausklappen</strong></summary><p style="margin-top: 12px;">bzw. einklappen funktioniert auch in HTML, siehe selfhtml.wiki</p></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;
}

Schablone

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

Der Text in Folge …

Nochmals von wegen Abstand des Texts unter </details> das &nbsp; und vor dem nächst Text eine Leerzeile. Aber wenn nächst von Überschrift eher kein &nbsp;

Bspw so
… unter </details> ohne &nbsp;

Text Text Text

Der Text in Folge ist sofort anschließend. Also besser ist mit &nbsp;

Aber wenn nächst eine Überschrift ist, eher kein &nbsp;

Infolge von Überschrift unter </details> ohne &nbsp;

Text Text Text

Bilddatei aus- / einklappen:

Ebenso lässt sich eine Bilddatei ein- bzw. ausklappen: Im "Text" Editor zwischen entsprechenden HTML-Elementen ein Bild anstatt von 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;">. Hier ist ein div das.

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

</details></div>
Beispiel-Klick

image

Überflüssige Leerzeilen durch Code &nbsp;

Geschütztes Leerzeichen
Schmales Leerzeichen

Damals der Zeit zur Erstellung des Beitrags

In Zusammenhang dem Abspeichern des HTML-Elements folgte der Code &nbsp;. Dadurch entsteht eine Leerzeile. Hierdurch rutscht der folgende Text nicht gleich nach.

Das Zeichen &nbsp; machte 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 &nbsp; 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>.

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

 

Zum Abschluss noch ein Übungsbeispiel, weil’s s nun so lustig ist:

<details><summary><em>Kunstversuch</em></summary>&nbsp;
<img class="aligncenter wp-image-1241 size-full" style="margin-bottom: 25px;" src="https://../Radierer.jpg" alt="" width="237" height="180" />
<p style="text-align: center;">Großer Radierer für kleine Schmierer.</p>
<p style="text-align: right;"><sup>Jahr 2018</sup></p>

</details>&nbsp;
Kunstversuch

Großer Radierer für kleine Schmierer.

Jahr 2018

 

… Und wie ist dein Erfolg des Beitrags?

Das Voting! – warum auch nicht … 

Clker-Free-Vector-Images
+ Tierstimmenarchiv
Ton ⊕ ↙ onmouseover

image… nur so ob 'aber
ja'
oder so
'Na ja


… nichts für ungut!

Grüß die Leserin,
Servus den Leser!

So sehr mir des voten durch das Feedback-Plug-in Helpful auch gefragt ist! – so ist im „Erkenne dich selbst“ die Zeit eilt … Da solls nun mit so Schuss von Humor und Witz? – und geht gar in die Komik. Ja, weil das wünsch ich all den von besuche!

jazzbanausen-bandlogo
Klick on ↑
Das Audio da ist im loop="on".
WordPress 'Hello Dolly'

So Linksbündig und rechtsbündig in_einer_Zeile

HTML:

<div style="text-align:left; float:left;">Linksbündig</div>
<div style="text-align:right;">Rechtsbündig</div>