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

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

… gewisse Browser …

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

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.

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

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 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 das nun ein Einblendeffekt jedem details 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 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

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.

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>

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.

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