Text auf- / einklappen
mit HTML und das CSS

Für den Leser ist die Formatierung des Texts primär. Voran bleibt hier das von Text aus- / einklappen. Das ist zur Strukturierung sehr von Vorteil. Meist ist das für kurzen Textauszug wie Info. So sind weitere Detail mit einem Klick zu öffnen. Seitens CSS ist hier ein Beispiel mit dabei.

Vorlage

In Vorlage das ‚details-Element‘ allein HTML  
<details><summary><strong>Details</strong></summary>
<p style="margin-top: 12px;">Text Text Text</p>

</details>&nbsp;

… und so ist das visuell:

details-element
Das Bild als Double.

Der Beitrag ist zur Strukturierung von Inhalt und somit siehe dann auch dem Titel Text scrollen die Struktur; so Tab-Menü die Übersicht.

Text auf- / einklappen

Nur mit HTML

↓… als auch mit CSS ↓

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 und feine Beschreibung.

Der Text ist beim Besuch der Seite eingeklappt + Abstand

Das mit dem Abstand für den Text oben unter Details und den Text unter dem ausklappen. So ist das als HTML. Weiter siehe unterhalb der Überschrift „Das CSS“.

<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 …

Die richtige Darstellung:

Text ausklappen

bzw. einklappen funktioniert auch in HTML.

Der ‚Text darunter‘

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

Siehe Bspw

Das ist nur pseudo Beispiel, da das ja schon mit CSS formatiert ist. Siehe gleich unterhalb „Das CSS…“.

… unter </details> ohne &nbsp;

Text Text Text

↑Hier der Text in Folge wäre ohne des CSS direkt unter dem auszuklappenden Text.

Und so mit </details>&nbsp; ist ein Abstand.

Text Text Text

 

↑Hier der Text in Folge ist vor dem ausklappen mit Abstand.

Nächst von Überschrift unter </details> ohne &nbsp;

Text Text Text

Gewisse Browser zeigen Rahmen um „Text aus- / einklappen“

… welcher mit CSS aufzulösen ist:

summary:focus {
outline: none;
}

Das CSS…

Wenns gefällt ist das ‚details-Element‘ mit CSS zu stylen. Des Weiteren sind hier dann identische Schablonen, sodass es den Browsern passt. Das alles ist ganz individuell zu gestalten. Hiermit fällt dann auch die Formatierung mit HTML weg.

 Schablone für 

HTML-detail+co
Das Bild als Double.

Das hier re. oben das Icon, das sollte ein Pfeil sein und ist so im Chrome. Browser Firefox ist das Icon auch anders, aber die transition funktioniert. Und mit Safari da ist das Icon so wie in Chrome und doppelt gemoppelt und die transition funkt nicht.

Die Selektoren, Attribute und deren Werte
  • Das mit dem ‚Text in Folge‘ ist unter details mit margin-bottom: 1em;.
  •  Das für die Schriftstärke ist bei summary durch font-weight: 500;
  • Des Inhalts oben der Abstand ist bei details[open] summary.
  • Mit details[open] allein da ist mit ausklappen extra Hintergrund.
  • Bei summary:after das top: 0em;. Nämlich wenn in summary ein Bild oder der Text mehrzeilig, somit ist das content: " 🡳 "; auf höhe.
details {
border: thin solid;
background: #fefede;
padding: 0.25em 1em;
margin-bottom: 1em;
}

summary {
position: relative;
padding-left: 1em;
font-weight: 500;
}

summary:after {
content: " 🡳 ";
position: absolute;
color: coral;
top: 0em;
right: 0.5em;
transition: all 0.5s;
}

details[open] summary::after {
color: green;
top: 0.05em;
transform: scale(1, -1);
margin-bottom: 1em;
}

details[open] summary {
margin-bottom: .5em;
}

details[open] {
background: #ddffd1;
}

Nachlese

Von CSS und des anderen siehe JavaScript/Tutorials/Akkordeon mit details.

self-html-fricklHinweis: Dort sind der Codes mit „ausprobieren“.

Der Codes ‚weicher Übergang‘, also langsames ausklappen ist noch nicht das, weil da eine höhe anzugeben ist. Und die wird dann nicht überall passen. Dazu noch so hier mit Theme stimmt das mit der breite nicht. Auch das ‚beim Öffnen andere Elemente schließen‘, konnte hier dem TEST nicht zum Erfolg.

html-seminarSiehe auch html-seminar.de. Für dort ist das mit Aufklappbereich in der Aufzählungsliste hervorzuheben.

i-marketinx

Weiter sehr vom Profi ist folgende Website. Sehr gute Ausführung. Hier ist der Fokus Ein Accordion mit den HTML-Elementen.

…weiter, so möchte

 Schablone für 
HTML-detail-orig
Das Bild als Double.
/* HTML details – Text aus- einklappen */
details {
border: thin solid;
background: #fefede;
padding: 0.25em 1em;
margin-bottom: 15px;
}

summary {
position: relative;
padding-left: 1em;
font-weight: 500;
}

details[open] summary {
margin-bottom: 0.5em;
}
 Schablone für 
HTML-detail-vs-icon
Das Bild als Double.

Von self-html-frickl. Da hier reduziert und statt Ausklapppfeilchen das content: " 🔘 ";

/* HTML details – Text aus- einklappen */
details {
border: thin solid;
background: #fefede;
}

summary::-webkit-details-marker,
summary::marker {
content: " 🔘 ";

}

details[open] summary::-webkit-details-marker,
details[open] summary::marker {
content: " ⚪️ ";
}

details[open] summary {
margin-bottom: .5em;
}
 Schablone für 
HTML-detail-orig+icon
Das Bild als Double.

Mit diesem CSS ist das Ausklapppfeilchen da und so Button rechts.

/* HTML details – Text aus- einklappen */
details {
border: thin solid;
background: #fefede;
}

summary:after {
content: " 🔘 ";
position: absolute;
top: 0em;
right: 0em;
}

details[open] summary::after {
content: " ⚪️ ";
top: 0.02em;
}

details[open] summary {
margin-bottom: .5em;
}
 Schablone für der Form 

HTML-detail-orig+icon

HTML-detail+icon-ein
Die beiden Bild als Double.

Das ist nur von Drumherum des anzupassen.

/* HTML details – Text aus- einklappen */
details {
border: thin solid;
background: #fefede;
padding: 0.25em 1em;
margin-bottom: 1em;
}

summary {
position: relative;
padding-left: 1em;
font-weight: 500;
}

summary:after {
content: " 🔘 ";
position: absolute;
top: 0em;
right: 0.5em;
transition: all 0.5s;
}

details[open] summary::after {
content: " 👀 ";
top: 0.05em;
transform: scale(1, -1);
margin-bottom: 1em;
}

details[open] summary {
margin-bottom: .5em;
}

details[open] {
background: #ddffd1;
}

 HTML Schablone details-Element mit CSS 

Das ‚details-Element‘ ist dasselbe nur ohne HTML-Formatierung.

<details><summary>Details</summary>Text Text Text

</details>

Das nun ist nur so…

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