Unfold Content / Weiterlesen ohne zusätzliches Plugin

Elementor: Unfold Content / Weiterlesen ohne zusätzliches Plugin

Längere Inhalte lassen sich in Elementor mit sehr wenig CSS und JavaScript
ein- und ausklappen. Ein zusätzliches Plugin oder ein spezielles
„Unfold Content“-Widget ist dafür nicht notwendig.

Der Inhalt wird dabei nicht über eine feste Höhe abgeschnitten. Stattdessen
wird direkt in Elementor festgelegt, an welcher Stelle der sichtbare Inhalt
endet. Alles, was erst nach einem Klick auf „weiterlesen“ erscheinen soll,
kommt in einen eigenen Container.

Aufbau in Elementor

Für jeden aufklappbaren Bereich wird ein äußerer Container angelegt.
Dieser bekommt die CSS-Klasse:

i2-unfold

Der Aufbau innerhalb dieses Containers sieht so aus:

Äußerer Container             CSS-Klasse: i2-unfold
│
├── sichtbare Widgets
│
├── Innerer Container         CSS-Klasse: i2-unfold-hidden
│   └── versteckte Widgets
│
└── Button                    CSS-Klasse: i2-unfold-toggle

Alle Inhalte oberhalb des inneren Containers sind immer sichtbar.
Die Inhalte im Container i2-unfold-hidden werden zunächst
ausgeblendet.

Wichtig: Der Button steht unterhalb des versteckten Containers.
Dadurch befindet er sich automatisch immer an der richtigen Stelle.

Im geschlossenen Zustand nimmt der versteckte Container keinen Platz ein:

Sichtbarer Inhalt

+ weiterlesen

Nach dem Öffnen erscheint der zusätzliche Inhalt vor demselben Button:

Sichtbarer Inhalt

Zusätzlicher Inhalt

- zuklappen

Es sind daher weder zwei Buttons noch eine Änderung der Position per
JavaScript notwendig.

Button in Elementor

Ein normales Elementor Button-Widget verwenden und diesem die CSS-Klasse
i2-unfold-toggle geben.

Als ursprünglichen Buttontext eintragen:

+ weiterlesen

Der Text wird beim Öffnen und Schließen automatisch per JavaScript geändert.

CSS

Das folgende CSS kann global eingebunden werden:

/* =========================================================
   image² Unfold Content
   ========================================================= */

/* Versteckter Bereich */
.i2-unfold .i2-unfold-hidden {
    display: none;
}

/* Geöffneter Zustand */
.i2-unfold.i2-unfold-open .i2-unfold-hidden {
    display: flex;
}

Da Elementor-Container auf Flexbox basieren, wird der versteckte Container
beim Öffnen wieder mit display: flex eingeblendet.
Einstellungen wie Richtung, Abstand und Ausrichtung werden weiterhin direkt
über Elementor gesteuert.

JavaScript

Das JavaScript kann einmal global eingebunden werden und funktioniert auch
mit mehreren Unfold-Bereichen auf derselben Seite:

<script>
document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.i2-unfold').forEach(function (unfold) {

        const toggle = unfold.querySelector('.i2-unfold-toggle');
        const hidden = unfold.querySelector('.i2-unfold-hidden');

        if (!toggle || !hidden) {
            return;
        }

        const button = toggle.querySelector('a, button');

        if (!button) {
            return;
        }

        button.setAttribute('aria-expanded', 'false');

        button.addEventListener('click', function (event) {

            event.preventDefault();

            const isOpen = unfold.classList.toggle('i2-unfold-open');

            button.setAttribute(
                'aria-expanded',
                isOpen ? 'true' : 'false'
            );

            const text = button.querySelector('.elementor-button-text');

            if (text) {
                text.textContent = isOpen
                    ? '- zuklappen'
                    : '+ weiterlesen';
            }
        });
    });
});
</script>

Mehrere Unfold-Bereiche auf einer Seite

Es sind keine individuellen IDs notwendig. Jeder äußere Container bekommt
dieselbe Klasse i2-unfold. Das JavaScript sucht Button und
versteckten Bereich immer nur innerhalb des jeweiligen Containers.

Dadurch können beliebig viele aufklappbare Bereiche auf derselben Seite
verwendet werden, ohne Klassen oder IDs durchnummerieren zu müssen.

Vorteil gegenüber einer festen Höhe

Der Inhalt wird nicht anhand einer Pixelhöhe oder einer bestimmten Anzahl
von Textzeilen abgeschnitten. Der gewünschte Schnitt wird einfach durch die
Aufteilung der Elementor-Widgets bestimmt.

Dadurch bleibt die Stelle auch auf unterschiedlichen Bildschirmgrößen
sinnvoll. Es kann beispielsweise ein Absatz vollständig sichtbar bleiben,
während alle folgenden Absätze im versteckten Container liegen. Auf Mobilgeräten
muss dafür keine eigene Höhe berechnet werden.

Geeignet für

Die Lösung eignet sich nicht nur für Text. Im versteckten Container können
beliebige Elementor-Widgets liegen, beispielsweise weitere Texteditoren,
Überschriften, Listen, Bilder, Buttons oder komplette Container.

Damit lässt sich ein einfaches „Weiterlesen / Zuklappen“ vollständig mit
Elementor-Bordmitteln, etwas CSS und wenigen Zeilen JavaScript umsetzen.
Ein zusätzliches Unfold-Content-Plugin ist nicht erforderlich.