Kein Witz: Akkordeon-Effekt nur mit HTML

Es ist kein wirklich kein Witz. Du hast die Möglichkeit nur mit HTML einen sogenannten Akkordeon-Effekt zu realisieren. Mit dem Akkordeon-Effekt ist gemeint, dass ein kleinerer Teil des Inhaltes zu sehen ist und wenn du darauf klickst, dann gibt es mehr zu sehen. Also eine Textbox zum Aufklappen. Hier erst einmal das “nackte” Beispiel:

Ich bin die Überschrift. Klick mich!

Ich bin der Text, der erst beim Ausklappen sichtbar wird.

Ich bin auch erst nach dem Ausklappen sichtbar

Ich auch!

Wenn du jetzt auf den Abschnitt Ich bin die Überschrift. Klick mich! klickst, dann bekommst du drei weitere Textzeilen zu sehen. Sicherlich, es ist optisch noch nicht ansprechend und es fehlt auch die visuelle Erkennung, dass du hier klicken kannst, aber die Grundfunktion ist da und dass ohne jegliche Zeile Javascript und auch nicht einmal irgendwelcher exotischer CSS-Trick ist notwendig.

Hier der HTML-Code dazu:

<details>
    <summary>Ich bin die Überschrift. Klick mich!</summary>
    <div>
        <p>Ich bin der Text, der erst beim Ausklappen sichtbar wird.</p>

        <p>Ich bin auch erst nach dem Ausklappen sichtbar</p>

        <p>Ich auch!</p>
    </div>
</details>

Mit CSS – für das Beispiel erst einmal nur inline – können wir das Beispiel visuell hervorheben und auch den Cursor so anpassen, dass der Nutzer merkt, dass er hier klicken kann:

Ich bin die Überschrift. Klick mich!

Ich bin der Text, der erst beim Ausklappen sichtbar wird.

Ich bin auch erst nach dem Ausklappen sichtbar

Ich auch!

Das ist natürlich viel besser. Es wird sofort erkannt, dass es sich hierbei um eine ausklappbare Box handelt und was zu tun ist. Hier der Code dazu:

<details style="background: #eee; border: 1px solid #666; border-radius: 3px; margin-bottom: 1.5rem;">
    <summary style="padding: 1rem; background: #666; color: #fff; cursor: pointer;">Ich bin die Überschrift. Klick mich!</summary>
    <div style="padding: 1rem 1rem 1px 1rem;">
        <p>Ich bin der Text, der erst beim Ausklappen sichtbar wird.</p>

        <p>Ich bin auch erst nach dem Ausklappen sichtbar</p>

        <p>Ich auch!</p>
    </div>
</details>

Was jetzt noch für die anspruchsvollen unter uns fehlt, ist ein Verzögerungseffekt beim Auf- und Zuklappen. Leider spricht weder details noch summary direkt auf die CSS-Eigenschaft transition an, mit der wir üblicherweise Bewegungen und Effekte geschmeidiger ablaufen lassen. Darum müssen wir auf den Umweg über die CSS-Regel @keyframes ausweichen.

In der folgenden Box findest du sowohl das Beispiel als auch den Code zu sehen. Das Ganze wird auf CodePen gehostet und ist erst sichtbar bzw. wird erst dann geladen, wenn du auf “Run Pen” klickst.

See the Pen
HTML-Akkordeon mit Verzögerungseffekt by Vlad (@vladimir-simovic)
on CodePen.

Solltest du Probleme bei der Anzeige mit dem eingebetteten Beispiel haben, dann kannst du es auch direkt auf der CodePen-Webseite aufrufen.

Wenn wir uns die Website Can i Use It anschauen, dann wird das details-Element von allen relevanten Browsern unterstützt.

Weiterführende Links

Image(s) licensed by Ingram Image/adpic.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.