Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Um Text in HTML auf- und einzuklappen, kannst Du das HTML-Element details
und summary
verwenden. Wenn der Benutzer auf “Details” klickt, wird der Inhalt des Details-Elements angezeigt. Dies ist eine nützliche Methode zur Strukturierung von Inhalten, insbesondere für kurze Textauszüge wie Informationen, die bei Bedarf erweitert werden können. Es gibt auch verschiedene Beispiele, wie Du das Ganze mithilfe von CSS gestalten kannst.
Vorlage
In Vorlage
Das ‘Details-Element’ allein HTML
Hier ist das Beispiel mit etwas 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 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 Pseudobeispiele.
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 ist 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 mit HTML’
Grundlegend ist das nicht so zu gestalten, denn es ist nicht empfehlenswert, einen Abstand unterhalb des </details>
-Elements ausschließlich mit
oder Leerzeilen zu erzeugen. Stattdessen sollte dieser Abstand mit CSS gestaltet werden, um eine konsistente und flexible Darstellung sicherzustellen.
Siehe wie der Abstand ohne CSS zu machen wäre, also welches so nicht in Empfehlung ist, aber hier zur verdeutlichung was mit dem Abstand gemeint ist:
<details> <summary>Click me to show text</summary> <p>Lorem ipsum dolor sit amet</p> </details> <p>Text nach dem Details-Tag</p>
Hinweis: Folgendes 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
Überschrift
In obigen Beispiel wurde durch das
-Zeichen ein Abstand zwischen dem </details>
-Tag und dem folgenden Text erzeugt. Der Abstand kann je nach Bedarf angepasst werden, indem mehrere
-Zeichen verwendet werden. Nochmals, diese Methode wird nicht empfohlen, da sie semantisch nicht korrekt ist und es besser ist, den Abstand durch CSS zu regeln.
Eine mögliche Lösung wäre, den Abstand zwischen den </details>
-Elementen und dem nächsten Text mit dem CSS-Selektor details + *
zu definieren. Zum Beispiel:
details + * { margin-top: 1em; }
Mit diesem Beispiel gehen wir direkt zum CSS über.
Das CSS …
Es ist möglich, das Aussehen des details
-Elements mit CSS zu ändern, um es an das Design der Website anzupassen. es kann beispielsweise die Hintergrundfarbe, die Schriftart oder die Schriftgröße geändert werden. Die Pseudoklassen :hover
und :focus
sind auch zu verwenden, um das Verhalten des Elements bei Mauszeiger-Hover und Tastatur-Fokus zu ändern.
Das details
-Element mit CSS 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
Die Selektoren, Attribute und deren Werte für das Anpassen des Designs wie folgt.
- Der Abstand unterhalb des “Text in Folge” wird mit
margin-bottom: 1em;
imdetails
Element definiert. - Die Schriftstärke des
details
Textes wird mitfont-weight: 500;
imsummary
Element definiert. - Der Abstand oberhalb des Inhalts wird mit
details[open] summary
definiert. - Die Position des Pfeils über dem
summary
Element wird mittop: 0em;
imsummary:after
Pseudo-Element definiert.- Wenn das
summary
Element mehrzeilig ist oder ein Bild enthält, wird das content: ” 🡳 “; auf der gleichen Höhe wie dassummary
Element positioniert.
- Wenn das
details[open] summary
definiert den Abstand zwischen dem Element<summary>
und dem umgebenden Inhalt, wenn dasdetails
-Element geöffnet ist.- Der Cursor für das
summary
Element wird mitcursor: pointer;
definiert. - Der Einblendeffekt für das Ausklappen jedes
details
Elements wird mitdetails[open] summary ~ *
und@keyframes open
definiert. - Das Hintergrund-Element für das Ausklappen jedes
details
Elements wird mitdetails[open]
definiert. - Der extra Rahmen, der von einigen Browsern um “Text aus / einklappen” angezeigt wird, kann mit
summary:focus { outline: none; }
aufgelöst werden.
/* 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
Hinweis: Für weitere Informationen zu CSS und JavaScript im Zusammenhang mit dem Auf- und Zuklappen von Texten siehe das Tutorial “JavaScript/Tutorials/Akkordeon mit details
. Dort sind auch Codes zum Ausprobieren verfügbar.
Der Code für einen weichen Übergang, also ein langsames Ausklappen, erfordert die Angabe einer Höhe, die nicht immer passend ist. In meinem Theme stimmt auch die Breite nicht, und auch das Schließen anderer Elemente beim Öffnen eines neuen Elements hat in meinem TEST nicht funktioniert.
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

Dieser Code stammt von self-html-frickl. Hier wurde der Code reduziert und anstelle des Aufklapppfeil wurde content: " 🔘 ";
verwendet.
/* 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 folgendem CSS ist der Ausklappe-Pfeil links und der 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


Im Folgenden befindet sich das CSS, das drumherum angepasst werden kann.
/* 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
- Schriftgröße für das <details> Element.
- Bilddatei aus- / einklappen.
- Nachlese zu von Open zu Close, Cursor und von Outline.
- … und kleiner Rückblick.
Anpassung der Schriftgröße im Detail-Element in CSS
Schriftgröße im details
-Element
CSS-Regeln werden in der Reihenfolge angewendet, in der sie im Stylesheet definiert sind. Spätere Regeln haben Vorrang, wenn sie auf dieselben Elemente angewendet werden.
Wenn beispielsweise eine Schriftgröße für die gesamte Website festgelegt ist und dann eine spezifischere Regel für ein bestimmtes Element wie details p {font-size: 90%;}
definiert wird, hat diese Regel Vorrang und ändert die Schriftgröße entsprechend.
details p,
details strong,
details b,
details ol,
details ul {
font-size: 90%;
}
Verwendet man jedoch das Schlüsselwort !important
, um eine Regel zu erzwingen, können andere Regeln, wie z.B. die Funktion des Font-Resizers in diesem Beispiel, überschrieben werden. Es ist dazu wie immer ratsam, !important
nur in Ausnahmefällen zu verwenden, wenn es unbedingt erforderlich ist. In diesem Beispiel und Rahmen ist darauf hinzuweisen, dass das eine Änderung ist – die im Customizer nicht WYSIWYG ist und erst nach dem Abspeichern und Reload der Seite wirksam wird.
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 …
… klickt 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.Folgend ist das mit CSS gelöst, so weit das möglich ist. Somit ist das nun ein Einblendeffekt jedemdetails
konform:details[open] summary ~ * { animation: open .5s ease-in-out; } @keyframes open { 0% {opacity: 0;} 100% {opacity: 1;} }
- Ansprechend: Zwei Probleme beim Gestalten des Details-Elements.
- Standardmäßig wird der Cursor nicht als Zeigefinger angezeigt. Das kann aber mit CSS geändert werden. Des
<summary>
Elements statt Standardcursor der Zeigefinger.details summary { cursor: pointer; }
- Das Einbetten von Überschriften (h2 usw.) in <summary> funktioniert nicht ordentlich. – Für eine individuelle Auszeichnung funktioniert besser
<details><summary><span style="font-size: 18px;">… und Nachlese</span></summary>
- Standardmäßig wird der Cursor nicht als Zeigefinger angezeigt. Das kann aber mit CSS geändert werden. 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
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 2023-April