@EWP, HTML + CSS

Text auf- / einklappen mit HTML

 Send feedbackhelpful-heart

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?

Bereitgestellt von Helpful
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>

Das könnte fĂŒr Dich auch interessant sein 
 ⚙

Sovrn