Text auf- / einklappen

Nur mit HTML

↓…als auch mit CSS ↓

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:

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>&nbsp;

… gewisse Browser …

Hinweis: Da hier der Website den <details> und <summary> CSS dabei ist das so zu sehen:

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>
&nbsp;
<p>Text nach dem Details-Tag</p>

Hinweis: Folgendes ist ein pseudo Beispiel, da hier der Website den <details> und <summary> CSS dabei ist.

↑Hier der Text unterhalb ist direkt unter dem auszuklappenden Text.

So mit </details>&nbsp;
ist Abstand

Text Text Text

↑Hier der Text unterhalb ist vor dem Ausklappen mit Abstand.

Ü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; im details Element definiert.
• Die Schriftstärke des details Textes wird mit font-weight: 500; im summary Element definiert.
• Der Abstand oberhalb des Inhalts wird mit details[open] summary definiert.
• Die Position des Pfeils über dem summary Element wird mit top: 0em; im summary:after Pseudo-Element definiert.
  • Wenn das summary Element mehrzeilig ist oder ein Bild enthält, wird das content: ” 🡳 “; auf der gleichen Höhe wie das summary Element positioniert.
• details[open] summary definiert den Abstand zwischen dem Element <summary> und dem umgebenden Inhalt, wenn das details-Element geöffnet ist.
• Der Cursor für das summary Element wird mit cursor: pointer; definiert.
• Der Einblendeffekt für das Ausklappen jedes details Elements wird mit details[open] summary ~ * und @keyframes open definiert.
• Das Hintergrund-Element für das Ausklappen jedes details Elements wird mit details[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 und
• details[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.

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>

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

details p,
details strong,
details b,
details ol,
details ul {
    font-size: 90%;
}

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.

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

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

… und kleiner Rückblick

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