Text auf- / einklappen
mit HTML und das CSS

Info echo
OpenClipart-Vectors-katze-1

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

Info echo
OpenClipart-Vectors-katze-2

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

Info echo
OpenClipart-Vectors-katze-3

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

Info echo
OpenClipart-Vectors-katze-7

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

Info echo
OpenClipart-Vectors-katze-4

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

Info echo
OpenClipart-Vectors-katze-5

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

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; 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
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Für den Leser ist die Strukturierung des Inhalts 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.

 

Zuerst

Text auf- / einklappen

Nur mit HTML

↓… als auch mit CSS ↓

HTML5-Auszeichnung <details> und <summary>

Hinweis

Infolge das hier mit CSS schon formatiert ist, sind das nun auch pseudo Beispiele. So des Kompetenten von nutzen, um sich dann “Des CSS…” auszukennen.

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>

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

Text einklappen

bzw. aufklappen funktioniert auch in HTML.

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 …

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

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

Hinweis: Das ist pseudo Beispiel, da hier der Website dem <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;

Text Text Text

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 

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.
  • 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[open] summary ist der Abstand des Inhalts von vom Element <summary>.
  • details summary {
    cursor: pointer;
    }
    ist des <summary> Elements statt Standardcursor der Zeigefinger.
  • Mit details[open] summary ~ * und @keyframes open ist ist das nun ein Einblendeffekt jedem details konform.
  • details[open] ist da mit ausklappen extra Hintergrund.
/* HTML details – Text aus- einklappen */
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;
}
*/
Genericons

… so bspw 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;
}

CSS-Definition für Genericons Internetkurse Köln

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 von Profil ist folgende Website. Sehr gute Ausführung. Hier ist der Fokus Ein Accordion mit den HTML-Elementen.

Info echo

Clker-Free-Vector-Images-test-okay
↑ anklicke

 


Nächst Tab: … Noch mal CSS

… Noch mal CSS

…weiter, wenn 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
– Das Bild als Double.
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 hier nur ohne HTML-Formatierung.

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

</details>
Nächst Tab: Tipps

Tipps

Und das nun ist nur 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. Dem Bild ist da nur so alignnone oder aligncenter zu geben, da sonst das Bild außerhalb des Hintergrund von CSS ist.

Beispiel-Klick
das Bild mit alignright

image

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.

</details>
Beispiel-Klick
das Bild mit aligncenter

image

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

Ü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

… und Nachlese
  • 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 jedem details konform.
    • So wie hier ist:
      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.
    • 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>
  • Gewisse Browser zeig(t)en extra Rahmen um “Text aus- / einklappen”… welcher mit CSS aufzulösen ist:
    summary:focus {
    outline: none;
    }

 


Aktualisiert im Jahr 2021-Oktober

… Und wie ist dein Erfolg des Beitrags?