Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Des HTML <details>
ist das mit Text auf- / einklappen. Das ist für den Leser zur Strukturierung des Inhalts. Meist ist das für kurzen Textauszug wie Information. So sind weitere Details mit einem Klick zu öffnen. Seitens CSS sind hier Beispiele dabei.
Vorlage
In Vorlage
Das 'Details-Element' allein HTML
… mit gefälliger Formatierung
<details><summary><strong>Details</strong></summary>
<p style="margin-top: 12px;">Text Text Text</p>
</details>
… und so ist das visuell:

Das 'Details-Element', welches dann mit CSS
… ist dasselbe, nur ohne HTML-Formatierung
<details><summary>Details</summary>Text Text Text
</details>
Inhalt
Tab 1: Übersicht zum 'Details-Element'
Tab 2: Das 'Details-Element' und weiteres zum CSS
Tab 3: Tipps / Nachlese. Das nun ist nur so wie-wo
Tab 1
Text auf- / einklappen
Nur mit HTML
HTML5-Auszeichnung
<details> und <summary>
Hinweis: Infolge der Beispiele ist das mit CSS schon formatiert, darum sind das nun so pseudo Beispiele.
Der Text ist beim Besuch der Seite aufgeklappt
<details open=""><summary>
<details open=""><summary><strong>Text einklappen</strong></summary>bzw. ausklappen funktioniert auch in HTML, siehe selfhtml.wiki</details>
Hinweis: Da hier der Website den <details>
und <summary>
CSS dabei ist das so zu sehen:
Text einklappen
bzw. aufklappen funktioniert auch in HTML.
Der Text ist beim Besuch der Seite eingeklappt + Text-Abstand
Das für den Text-Abstand oben unter Details und den Text unter dem ausklappen.
- 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>
… gewisse Browser …
Hinweis: Da hier der Website den <details>
und <summary>
CSS dabei ist das so zu sehen:
Text ausklappen
bzw. einklappen funktioniert auch in HTML.
Der 'Text darunter'
Nochmals von wegen Abstand des Texts unter </details>
ist das
. Und vor dem nächst Text eine Leerzeile zu setzen. Aber wenn nächst von Überschrift eher kein
Siehe Bspw
Hinweis: Das ist ein pseudo Beispiel, da hier der Website den <details>
und <summary>
CSS dabei ist.
… unter </details>
ohne
Text Text Text
↑Hier der Text unterhalb ist direkt unter dem auszuklappenden Text.
So mit </details>
ist Abstand
Text Text Text

↑Hier der Text unterhalb ist vor dem Ausklappen mit Abstand.
Nächst von Überschrift
unter </details>
ohne
Text Text Text
Das CSS…
Das details
-Element mit CSS zu stylen. Des Weiteren sind hier dann Schablonen, sodass es den Browsern passt. Das alles ist ganz individuell zu gestalten. Hiermit fällt dann auch die Formatierung im HTML weg.
Schablone
So zur Vorlage samt der Erläuterung.
Die Selektoren, Attribute und deren Werte
- Das mit dem 'Text in Folge' ist unter
details
mitmargin-bottom: 1em;
. - Das für die Schriftstärke ist bei
summary
durchfont-weight: 500;
- Des Inhalts oben der Abstand ist bei
details[open] summary
. - Bei
summary:after
dastop: 0em;
. Nämlich wenn insummary
ein Bild oder der Text mehrzeilig, somit ist dascontent: " 🡳 ";
auf Höhe. details[open] summary
ist der Abstand des Inhalts von vom Element<summary>
.details summary {
ist des
cursor: pointer;
}<summary>
Elements statt Standardcursor der Zeigefinger.- Mit
details[open] summary ~ *
und@keyframes open
ist das nun ein Einblendeffekt jedemdetails
konform. details[open]
ist da mit ausklappen extra Hintergrund.summary:focus
gewisse Browser zeigen extra Rahmen um "Text aus / einklappen", welcher mit CSS aufzulösen ist
/* HTML Text aus- einklappen das CSS */
details {
border: thin solid;
background: #fefede;
padding: 0.25em 1em;
margin-bottom: 1.5em;
}
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: 1em;
}
details summary {
cursor: pointer;
}
details[open] summary ~ * {
animation: open .6s ease-in-out;
}
@keyframes open {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*details[open] {
background: #ddffd1;
}
*/
summary:focus {
outline: none;
}
Bspw Genericons für …
summary:after
unddetails[open] summary::after
summary:after {
font: normal 16px/1 'Genericons';
content: "\f404";
padding-left:5px;
vertical-align:sub;
font-size:1.2em;
position: absolute;
top: 0.05em;
right: 0.5em;
transition: all 0.5s;
}
details[open] summary::after {
font: normal 16px/1 'Genericons';
content: "\f403";
padding-left:5px;
vertical-align:sub;
font-size:1.2em;
top: 0.05em;
transform: scale(1, -1);
margin-bottom: 1em;
}
Das mit den Genericons siehe zum Beitrag im Titel Dashicons von WordPress vs. Genericons!
Nachlese HTML Text Auf-Einklappen
Von CSS und des anderen siehe JavaScript/Tutorials/Akkordeon mit details
.
Hinweis: 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 das wird dann nicht überall passen.
Dazu noch, hier so mit meinem Theme stimmt das mit der breite nicht. Auch das mit dem "beim Öffnen andere Elemente schließen", konnte hier dem TEST nicht zum Erfolg.
Siehe auch html-seminar.de. Für dort ist das mit dem Aufklappen in der Aufzählungsliste hervorzuheben.
Weiter sehr von Profil ist folgende Website. Sehr gute Ausführung. Hier ist der Fokus Ein Accordion mit den HTML-Elementen.
Nächst Tab: … dazu CSS
Tab 2
Das 'details-Element'
und weiteres zum CSS
Schablone 1

/* CSS für HTML 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 2

Von self-html-frickl. Da hier reduziert und statt Aufklapppfeil das content: " 🔘 ";
/* CSS für HTML 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 3

Mit diesem CSS ist das mit Pfeil links da und so Button rechts.
/* CSS für HTML – 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 4


Das ist nur von Drumherum des anzupassen.
/* CSS für HTML 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>
Nächst Tab: Tipps / NachleseTab 3
Tipp / Nachlese
Das nun ist nur so wie-wo
- Bilddatei aus- / einklappen.
- Nachlese zu von Open zu Close, Cursor und von Outline.
- …und kleiner Rückblick, de facto! – ist so 🙂
Bilddatei aus- / einklappen
Ebenso lässt sich eine Bilddatei ein- bzw. ausklappen: Im "Text" Editor zwischen den HTML-Elementen ein Bild anstatt von Text einfügen.
Beispiel-Klick
das Bild mit alignright
… Somit mag mal mit "Bild ausklappen" bei Besuchern auch das Bedürfnis heben, zu sehen, welches Bild sich verbergen mag. 🙂
<details><summary>Bild ausklappen</summary><img class="wp-image-1227 size-medium aligncenter" src="..image27-300x172.jpg" alt="image" width="200" height="100" />Text Text Text.
Beispiel-Klick
das Bild mit aligncenter
<details><summary>Bild ausklappen</summary><img class="wp-image-1227 size-medium aligncenter" src="..image27-300x172.jpg" alt="image" width="200" height="100" />Text Text Text.
Übungsbeispiel, weil’s nun so lustig ist
<details><summary><em>Kunstversuch</em></summary><a href="https://..Clker-Free-Vector-Images-radierer.svg"><img class="wp-image-216310 size-medium aligncenter" src="https://wegerl.at/wp-content/uploads/2015/09/Clker-Free-Vector-Images-radierer.svg" alt="" width="300" height="300" /></a> <p style="text-align: center;">Großer Radierer für kleine "Schmierer".</p> <p style="text-align: right;"><sup>Jahr 2018</sup></p> </details>
Nachlese …
… klick an
- Statt 'Detail' mit von Open zu Close. – nette Spielart von.
- Der Einblendeffekt des Inhalts und der Idee mit
opacity
. Da ist das Missfallen nicht, welche von Einstellung zur Höhe abhängt und so nicht überall passend sein wird. Somit ist das nun ein Einblendeffekt jedemdetails
konform.- So wie hier ist:
details[open] summary ~ * { animation: open .5s ease-in-out; } @keyframes open { 0% {opacity: 0;} 100% {opacity: 1;} }
- So wie hier ist:
- Ansprechend: Zwei Probleme beim Gestalten des Details-Elements.
- Des
<summary>
Elements statt Standardcursor der Zeigefinger.details summary { cursor: pointer; }
- Das mit Überschrift (h2 usw.) in
<summary>
funktioniert aber nicht. Weil so in Eingabe von Editor 'Visuell' das nicht geht oder in der Eingabe Editor 'Text' und umschalten 'Visuell' die Formatierung sich löscht. Für individuelle Auszeichnung dann bspw<details><summary><span style="font-size: 18px;">… und Nachlese</span></summary>
- Des
- Gewisse Browser zeig(t)en extra Rahmen um "Text aus- / einklappen", welcher mit CSS aufzulösen ist:
summary:focus { outline: none; }
…und kleiner Rückblick
Damals der Zeit
zur Erstellung des Beitrags
Überflüssige Leerzeilen durch Code
Geschütztes Leerzeichen
Schmales Leerzeichen
In Zusammenhang dem Abspeichern des HTML-Elements folgte der Code
. Dadurch entsteht eine Leerzeile. Somit rutscht der folgende Text nicht nach.
Das Zeichen
machte hier aber Missfallen, da es durch Abspeichern im Modus „Visuell“ nach jeweiligem Abspeichern eine Leerzeile einfügte. Dem 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>
.
<div><details><summary><strong>Hinweis</strong></summary>
<div style="margin-top: 12px;">Text Text Text</div>
</details></div>
Tab 1: Übersicht zum 'details-Element'
Tab 2: Das 'details-Element' und weiteres zum CSS
Tab 3: Tipp / Nachlese. Das nun ist nur so wie-wo
Info echo
- Zur Postierung von Inhalt siehe auch Text scrollen die Struktur und so Tab-Menü die Übersicht.
Aktualisiert im Jahr 2022-September