Akkordeon ohne JavaScript: FAQs mit reinem CSS

Der Kunde wünscht sich eine FAQ-Sektion: zehn Fragen, jeweils aufklappbar, und beim Klick soll sich die Antwort sanft nach unten schieben. Der Reflex vieler Entwicklerinnen und Entwickler ist bis heute derselbe wie vor zehn Jahren – schnell ein Akkordeon-Plugin eingebunden, dreißig Zeilen JavaScript, fertig. Nur: Jedes dieser Skripte ist zusätzliches Gewicht, ein weiterer Baustein, der bei Updates kaputtgehen kann, und auf vielen Kundenseiten ein weiteres Fremdskript, das man im Blick behalten muss. 2026 brauchst du das für ein Akkordeon nicht mehr.

Dieser Beitrag zeigt, wie du aufklappbare FAQ-Blöcke mit reinem HTML und CSS baust – barrierefrei von Haus aus, ohne eine Zeile JavaScript. Und er ist ehrlich an der Stelle, an der es darauf ankommt: bei der Animation, wo nicht jeder Browser gleich weit ist.

Ein Akkordeon ohne JavaScript beginnt bei details und summary

Das Fundament liefert ein HTML-Element, das es seit Jahren in jedem Browser gibt: <details> mit einem <summary> darin. Das <summary> ist die immer sichtbare Überschrift, der restliche Inhalt klappt beim Klick auf und wieder zu.

<details>
  <summary>Wie lange dauert ein Projekt?</summary>
  <p>Eine typische Website setzen wir in vier bis sechs Wochen um.</p>
</details>

Das Entscheidende: Dieses Verhalten ist eingebaut. Das Element ist per Tastatur bedienbar, Screenreader kündigen den Auf- und Zuklapp-Zustand korrekt an, und es funktioniert auch dann, wenn JavaScript scheitert oder gar nicht lädt. Du bekommst also genau die Zugänglichkeit geschenkt, die du bei einer selbstgebauten Klick-Lösung mühsam nachrüsten müsstest – ein Punkt, der direkt auf die Barrierefreiheit von Websites einzahlt.

Mehrere Fragen, aber nur eine offen: das name-Attribut

Ein echtes Akkordeon soll oft nur eine Antwort gleichzeitig zeigen – öffnet man die nächste, schließt die vorige. Früher war genau das der Grund, doch zu JavaScript zu greifen. Inzwischen reicht ein gemeinsames name-Attribut auf den <details>-Elementen, wie das Chrome-Team im Beitrag More options for styling details beschreibt:

<details name="faq"><summary>Frage 1</summary><p>…</p></details>
<details name="faq"><summary>Frage 2</summary><p>…</p></details>

Alle Elemente mit demselben name bilden eine exklusive Gruppe – ganz ohne Skript. Das Verhalten ist breit verfügbar und fällt in älteren Browsern elegant auf „mehrere gleichzeitig offen“ zurück, was niemanden stört.

Styling: endlich Zugriff auf den aufklappbaren Inhalt

Lange war das Stylen von <details> fummelig, weil man den aufklappbaren Bereich nicht sauber adressieren konnte. Das hat sich mit dem Pseudo-Element ::details-content geändert. Laut MDN ist es seit September 2025 als „Baseline: Newly available“ eingestuft – es funktioniert also in den aktuellen Versionen aller großen Browser, gilt aber noch nicht als „widely available“.

details {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
}
summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 600;
}
details::details-content {
  padding: 0 1rem 1rem;
}

Damit gestaltest du den Antwortbereich gezielt – Hintergrund, Abstände, Rahmen – während das <summary> als Griff unberührt bleibt. Auch den kleinen Dreieck-Marker kannst du anpassen: Mit list-style: none auf dem <summary> verschwindet er, danach setzt du über summary::after ein eigenes Zeichen, etwa ein Plus, das sich im geöffneten Zustand per details[open] summary::after dreht. Soll eine bestimmte Frage von Anfang an offen stehen, genügt das Attribut open direkt am <details>-Element – ebenfalls ganz ohne Skript.

Die Animation – und wo die Grenzen liegen

Jetzt zum sanften Aufschieben. Hier gibt es zwei Wege, und sie unterscheiden sich in der Browser-Unterstützung deutlich.

Der robuste, überall funktionierende Weg ist eine Ein- und Ausblendung über Transparenz, kombiniert mit content-visibility. Weil ::details-content zur Baseline 2025 gehört, läuft das quer durch alle aktuellen Browser:

details::details-content {
  opacity: 0;
  transition: opacity 400ms, content-visibility 400ms allow-discrete;
}
details[open]::details-content {
  opacity: 1;
}

Der zweite Weg animiert die Höhe von Null auf den tatsächlichen Inhalt – also das klassische „Aufschieben“. Das war lange unmöglich, weil CSS nicht zu height: auto animieren konnte. Mit interpolate-size: allow-keywords und der Funktion calc-size() geht es, wie Google im Chrome-Entwicklerblog erklärt. Eine einzige Regel auf :root genügt, weil die Eigenschaft vererbt wird:

:root { interpolate-size: allow-keywords; }

details::details-content {
  height: 0;
  transition: height 400ms ease;
}
details[open]::details-content {
  height: auto;
}

Und hier kommt die ehrliche Einordnung, die zu einem Produkt passt, das selbst nichts erfindet: interpolate-size wird laut caniuse bislang nur von Chrome und Edge ab Version 129 unterstützt, Firefox und Safari ziehen noch nicht mit; die weltweite Abdeckung liegt bei rund 72 Prozent. Das ist kein Grund, darauf zu verzichten – aber einer, es als progressive Verbesserung zu behandeln. In Browsern ohne Unterstützung klappt der Inhalt einfach ohne Übergang auf. Das ist kein Fehler, sondern genau das erwünschte Verhalten: Die Funktion bleibt überall erhalten, nur die Deko fehlt dort. Wer die Höhenanimation unbedingt überall braucht, bleibt also vorerst beim Opacity-Weg – oder kombiniert beide und lässt die Höhe als Bonus für Chrome und Edge obendrauf laufen.

Bewegung respektiert die Nutzereinstellung

Wenn du animierst, gehört ein Detail dazu, das in der Hektik gern vergessen wird: Nicht alle Menschen wollen Bewegung auf einer Seite. Manche reagieren empfindlich darauf, andere haben sie am Betriebssystem bewusst reduziert. Für sauberen, barrierefreien Code packst du die Übergänge deshalb in eine Media Query, die diese Einstellung abfragt:

@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    transition: opacity 400ms, content-visibility 400ms allow-discrete;
  }
}

So bekommen nur die Besucher eine Animation, die nichts dagegen haben; alle anderen sehen die FAQ sofort auf- und zugeklappt. Das ist genau die Art Rücksicht, die eine saubere Umsetzung von einem schnellen Effekt unterscheidet – und sie kostet dich drei Zeilen.

Warum sich der Verzicht aufs Plugin lohnt

Für eine Agentur, die viele Kundenseiten gleichzeitig betreut, ist der native Weg mehr als eine Spielerei. Jedes eingesparte Skript bedeutet weniger Ladegewicht, eine Abhängigkeit weniger, die bei einem Plugin- oder Theme-Update brechen kann, und einen Baustein weniger, den du über alle Projekte hinweg pflegen musst. Dazu kommt der Datenschutz-Aspekt: Kein externes Akkordeon-Skript heißt auch kein weiterer Dienst, dessen Einbindung du rechtlich bewerten musst. Und die Barrierefreiheit, die bei vielen JavaScript-Lösungen nachträglich geflickt wird, ist hier von Anfang an da.

Ein praktischer Nebeneffekt: Weil der Frage-und-Antwort-Inhalt als echtes Markup im HTML steht und nicht erst per Skript nachgeladen wird, kann ihn auch die Suchmaschine problemlos lesen – eine gute Grundlage, um die FAQ zusätzlich mit strukturierten Daten auszuzeichnen und damit für Rich Snippets und KI-Antworten sichtbar zu machen.

Das Muster ist größer als das Akkordeon selbst. Immer mehr Interaktionen, für die früher ein Framework oder ein Plugin nötig war, lassen sich heute mit modernem CSS abbilden – schlanker, robuster und wartungsärmer. Das Akkordeon ist nur der Einstieg, bei dem sich der Umstieg am schnellsten auszahlt.

Wo das native Akkordeon an Grenzen stößt

Damit du es im Kundenprojekt richtig einschätzt, gehört auch die andere Seite dazu. Der native Weg glänzt beim klassischen FAQ, aber er ist kein Universalwerkzeug. Soll sich der Auf- und Zuklapp-Zustand von außen steuern lassen – etwa durch einen Button an anderer Stelle der Seite oder abhängig von einem Formular –, kommst du um etwas JavaScript nicht herum, weil CSS keine Logik abbildet. Auch die vollständig identische Darstellung des Aufklapp-Markers über alle Browser hinweg bleibt fummelig, solange Safari und Firefox beim Styling an einzelnen Stellen anders ticken. Und wer komplexe, ineinander verschachtelte Interaktionen plant, ist mit einer bewusst gewählten Komponente besser bedient als mit immer tieferen CSS-Tricks.

Die Faustregel: Für aufklappbare Inhalte, die einfach da sein und sauber funktionieren sollen – FAQ, Detailangaben, „mehr anzeigen“ –, ist das native Element die erste Wahl. Erst wenn echte Steuerlogik dazukommt, wiegt der Griff zum Skript seinen Preis auf.

Fazit

Ein aufklappbares FAQ braucht 2026 kein JavaScript mehr. <details> und <summary> liefern das Verhalten samt Barrierefreiheit, das name-Attribut macht daraus ein exklusives Akkordeon, und ::details-content gibt dir endlich sauberen Zugriff aufs Styling. Bei der Animation lohnt der klare Blick: Die Ein- und Ausblendung läuft überall, die Höhenanimation ist bislang Chrome und Edge vorbehalten und sollte als Verbesserung gedacht werden, nicht als Voraussetzung. Genau diese Ehrlichkeit über das, was gesichert funktioniert und was nicht, ist der Unterschied zwischen Code, der im Kundenprojekt hält, und einem Effekt, der nur auf dem eigenen Rechner glänzt.