Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
HTML Text Auf-Einklappen
smilies.4-user.de

HTML Text Auf-Einklappen
und weiteres von CSS-Technik

Bild 'pixabay', Feuer von 947051 und Illustration HTML inspire-studio
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.

Text auf- / einklappen
HTML5-Auszeichnung
<details> und <summary>

Hier ist zunächst eine einfache HTML-Vorlage für das Details-Element. Direkt darunter befindet sich fast dasselbe, jedoch sind die Anpassungen dann über CSS vorzunehmen, was eine vielfältigere Gestaltung ermöglicht.

Das 'Details-Element' in reinem HTML

Hier ist das Beispiel:

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

</details>&nbsp;

…und so sieht es visuell aus:

Details

Text aufklappen und einklappen mit <details>

 

Sollte aber der Text beim Besuch der Seite aufgeklappt sein:

<details open>

Die Verwendung von open innerhalb des <details>-Tags bewirkt, dass der Inhalt standardmäßig beim Laden der Seite sichtbar ist. Es ist ein HTML-Attribut, das das Details-Element beim Laden der Seite automatisch öffnet. Das open reicht aus, der WP-Editor kann vielleicht das ="" hinzufügen (<details open="">), jedoch ist dies nicht unbedingt erforderlich.

<details open=""><summary><strong>Details</strong></summary>Text Text Text

</details>&nbsp;
Details

Text einklappen und aufklappen mit <details open>

 

Das Textbeispiel hier enthält einen Abstand durch das &nbsp;. Im Beitrag wird erklärt, wie dieser Abstand mit CSS korrekt gestaltet werden kann.

Das 'Details-Element' mit CSS

Das 'Details-Element' mit CSS-Styling – ganz ohne HTML-Formatierung:

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

</details>

Und hier ist die Version mit CSS:

Details

Text Text Text

Tab 1: Übersicht zum 'Details-Element'
Tab 2: 'Details-Element' und weiteres CSS
Tab 3: Tipps, Beispiele und Nachlese

Element-Übersicht

<details>-Element und der Abstand

Grundsätzlich ist es nicht empfehlenswert, einen Abstand ausschließlich unterhalb des </details>-Elements durch &nbsp; oder Leerzeilen zu erzeugen. Stattdessen sollte dieser Abstand mit CSS gestaltet werden, um eine konsistente und flexible Darstellung sicherzustellen.

… unter </details> ohne &nbsp;

Text Text Text

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

Um zu verdeutlichen, was mit dem Abstand gemeint ist, zeigt das folgende Beispiel, wie der Abstand ohne CSS erzeugt wird, obwohl diese Methode nicht empfohlen wird:

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

</details>&nbsp;
Text nach dem Details-Tag
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 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 0.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: … Details-Element' und weiteres CSS

Weiteres CSS

Das 'details-Element' und
weitere Detail zur CSS-Technik

 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: 0.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: 0.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: 0.5em;
}

details[open] {
    background: #ddffd1;
}

 HTML Schablone Details-Element mit CSS: Das 'Details-Element' ist dasselbe, nur ohne HTML-Formatierung (&nbsp).

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

</details>
Nächst Tab: Tipps, Beispiele und Nachlese

Tipps / Nachlese

Tipps / Nachlese

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

Weitere Informationen zum !important findet sich im Abschnitt Der Einsatz von !important in CSS.

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 könnte bei Besuchern auch das Bedürfnis geweckt werden, zu sehen, welches Bild sich verbirgt. 🙂

<details><summary><em>Beispiel-Klick
das Bild mit <code>alignright</code></em></summary><a href="https: .. Clker-Free-Vector-Images-vegetables.svg"><img class="alignright wp-image-216312 " src="https: .. Clker-Free-Vector-Images-vegetables.svg" alt="" width="251" height="144" /></a>

<span style="font-size: 16px;">… <i>... Somit könnte bei Besuchern auch das Bedürfnis geweckt werden, zu sehen, welches Bild sich verbirgt.</i> :-)</span>

</details>
Beispiel-Klick
das Bild mit aligncenter

<details open><summary><em>Beispiel-Klick
das Bild mit <code>aligncenter</code></em></summary><img class="wp-image-123 size-medium aligncenter" src="https: .. /Clker-Free-Vector-Images-vegetables.svg" alt="" width="300" height="300" />

</details>

Nochmal kleines Übungsbeispiel – weil es einfach zum Schmunzeln ist!

Kunstversuch

Großer Radierer für kleine "Schmierer".

Jahr 2023

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

… 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 0.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
Eingangs in diesem Beitrag sollten die Beispiele des Details-Elements zunächst ohne CSS präsentiert werden. Da auf dieser Website bereits CSS für das Details-Element definiert ist, wurde eine separate Klasse erstellt, um dies zu ermöglichen. Dies wurde durch folgendes Vorgehen erreicht:

/* Details ohne CSS */
.ohne-css-container details,
.ohne-css-container summary::after,
.ohne-css-container details[open] summary ~ * {
  all: unset !important;
  background: transparent !important;
}

.ohne-css-container details[open] summary {
  margin-bottom: 0em;
}

.ohne-css-container summary {
  padding-left: 0em;
}

Dieser Ansatz verwendet die CSS-Eigenschaft all: unset; um alle CSS-Stile für das Element .ohne-css-container zurückzusetzen. Beachte jedoch, dass dies nicht perfekt ist und einige Inline-Stile möglicherweise nicht vollständig entfernt werden.

Im Weiteren hätten wir eine minimale Formatierung für das Beispiel:

.ohne-css-container details[open] summary ~ p {
    margin: 12px 0 25px 0;
}

Und im Editor Text:

<div class="ohne-css-container"><details><summary><strong>Details</strong></summary>Text Text Text

</details></div>

Abschließend noch ein Beispiel für Bug, der zu Beginn des Projekts auftrat:

Überflüssige Leerzeilen durch &nbsp; 

Der Bug war im Zusammenhag des geschützten Leerzeichens. Geschütztes 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 Probleme, 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, da sollte der Start-Tag <div> vor Start-Tag <details> eingefügt werden?

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

Das war damals die Lösung, aber der Bug wurde inzwischen behoben und das Details-Element funktioniert nun normal und ohne div-Tag.

Die Anordnung von Inhalten…

Zum Positionieren von Inhalten siehe auch die Abschnitte:

zeitmaschine, gifzentrale.com

Aktualisiert im Jahr 2024-Januar