Kein Witz: Akkordeon-Effekt nur mit HTML

Symboldbild: Akkordeon

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 Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

7 Kommentare

  1. Der HTML-Tag summary scheint nur bedingt tauglich zu sein. Im Feedreader feedly wird statt des Textes nur “Details” mit einem Dreieck davor angezeigt.

  2. Danke für den Artikel, dieses Element kannte ich noch nicht.

    Aber streng genommen kann ich damit ja eigentlich kein klassisches Akkordeon machen, bei dem mehrere Elemente vorhanden sind, und, sobald eines aufgeklappt wird, die anderen automatisch zuklappen. Dafür würde man dann wohl doch wieder JS oder Workarounds benötigen.

    Viele Grüße,
    Wolfgang

    1. Die Akkordeons (ich rede vom Instrument) die ich kenne, da geht nix automatisch zu. Da muss man schon aktiv arbeiten. 🙂

      Wobei ist das automatische Zuklappen eine Geschmacksfrage. Ich mag die nicht. Ich wollte neulich bei einer FAQ zwei Punkte miteinander vergleichen, was aber nicht ging, da das eine immer zuging, wenn ich auf das andere klickte.

  3. Einfach klasse!!!
    Ich habe lange gesucht und nichts vergleichbares gefunden.
    Herzlichen Dank!

    Klaus

Kommentare sind geschlossen.