Text auf- / einklappen

Nur mit HTML

↓… als auch mit CSS ↓

HTML5-Auszeichnung <details> und <summary>

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>

Im Frontend ist das so visuell:

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 …

Im Frontend ist das so visuell:

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

Anmerkung: Das ist pseudo Beispiel, da hier der Website das mit CSS formatiert 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…

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 

Das hier re. oben das Icon, das sollte ein Pfeil sein und ist so im Chrome. Browser Firefox ist das Icon auch anders, aber die transition funktioniert. Und mit Safari da ist das Icon so wie in Chrome und doppelt gemoppelt und die transition funkt nicht.

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;
}
*/

Nachlese

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

Siehe auch html-seminar.de. Für dort ist das mit Aufklappbereich 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.

^{Info echo}

…weiter, so möchte

 Schablone für 

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

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 

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 

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>

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.

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

<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

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