HTML Text Auf-Einklappen
und weiter das mit CSS

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Advanced Editor Tools – ist so klasse!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
“Advanced Editor Tools – ist das ausgezeichnete!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Advanced Editor Tools – ist so sehr gut !”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Advanced Editor Tools – und tut sehr gut!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
“Advanced Editor Tools – ist so fabelhaft!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Advanced Editor Tools – ist de luxe!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Advanced Editor Tools – ist so fein!”
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>&nbsp;

… und so ist das visuell:

details-element
… Das Bild als Double.

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

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

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

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

… unter </details> ohne &nbsp;

Text Text Text

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

So mit </details>&nbsp;
ist Abstand

Text Text Text

'details' Textabstand unterhalb
Bild für ‘details’ Textabstand unterhalb

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

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

In obigen Beispiel wurde durch das &nbsp;-Zeichen ein Abstand zwischen dem </details>-Tag und dem folgenden Text erzeugt. Der Abstand kann je nach Bedarf angepasst werden, indem mehrere &nbsp;-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.self-html-frickl

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-seminarhtml-seminar.de. Für dort ist das mit dem Aufklappen in der Aufzählungsliste hervorzuheben.

i-marketinx

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 

HTML-detail-orig
– Das Bild als Double.
/* 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 
HTML-detail-vs-icon
– Das Bild als Double.

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 
HTML-detail-orig+icon
– Das Bild als Double.

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 
HTML-detail-orig+icon
– Das Bild als Double.
HTML-detail+icon-ein
– Die beiden Bild als Double.

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 / Nachlese

Tab 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>
Kunstversuch

Großer Radierer für kleine “Schmierer”.

Jahr 2018

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 jedem details 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>
  • 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 &nbsp;

Geschütztes Leerzeichen
Schmales Leerzeichen

In Zusammenhang dem Abspeichern des HTML-Elements folgte der Code &nbsp;. Dadurch entsteht eine Leerzeile. Somit rutscht der folgende Text nicht nach.

Das Zeichen &nbsp; 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 &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>&lt;/div>
&nbsp;

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


Aktualisiert im Jahr 2023-April