Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

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:

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;

Das Textbeispiel hier enthält einen Abstand durch das  . 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-Element und der Abstand

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

↑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

 

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

Überschrift

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

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

 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: 

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: 

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: 

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>

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:

details p,
details strong,
details b,
details ol,
details ul {
    font-size: 90%;
}

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

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

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

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

Die Anordnung von Inhalten…

Zum Positionieren von Inhalten siehe auch die Abschnitte:

• Text scrollen die Struktur und
• Tab-Menü die Übersicht.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Oktober