FAQ-Seite: Fragen zum Aufklappen

vom 07.12.2017 von Oliver Misch

Häufige Fragen mit aufklappbaren Antworten sind der Paradefall für das Duo details und summary: interaktiv, zugänglich, ohne JavaScript. Bauen wir eine komplette FAQ-Seite.

Schritt 1: Fragen sammeln, ehrlich sortieren

Der wichtigste Schritt passiert vor dem Code: Sammle Fragen die wirklich gestellt werden, nicht die die du gern beantworten würdest. Sortiere nach Häufigkeit, die Top-Frage nach oben. Eine FAQ mit zwanzig Alibi-Fragen hilft niemandm.

Schritt 2: Die Struktur

HTML-Code

<h1>Häufige Fragen</h1>

<details name="faq">
    <summary>Was kostet der Reparatur-Check?</summary>
    <p>Der erste Blick aufs Gerät ist kostenlos. Danach gibt es
    einen Festpreis-Vorschlag, bevor irgendwas passiert.</p>
</details>

<details name="faq">
    <summary>Repariert ihr auch Heimcomputer aus den 80ern?</summary>
    <p>Mit besonderer Freude sogar. Ersatzteile dauern manchmal,
    Geduld gehört zum Hobby.</p>
</details>

Jede Frage ist ein details-Block, die Frage selbst steht im summary. Das gemeinsame name="faq" macht daraus ein Akkordeon: öffnet sich eine Antwort, schließt die vorige. Wer lieber mehrere gleichzeitig offen lässt, lässt das Attribut einfach wegg.

Schritt 3: Gestalten

CSS

details {
    border: 1px solid #C0C0C0;
    margin-bottom: 8px;
}
summary {
    padding: 12px 16px;
    font-weight: bold;
    cursor: pointer;
    background: #F4F4F4;
}
summary:hover, summary:focus {
    background: #E0E0E0;
}
details[open] summary {
    border-bottom: 1px solid #C0C0C0;
}
details p {
    padding: 12px 16px;
    margin: 0;
}

Der Selektor details[open] greift nur im aufgeklappten Zustand, so bekommt die offene Frage ihre Trennlinie. Der cursor: pointer signalisiert Klickbarkeit, und der Fokus-Zustand sorgt dafür dass Tastaturnutzer sehen wo sie sind.

Schritt 4: Die zwei FAQ-Todsünden vermeiden

Wichtiges verstecken. Preise, Fristen, Warnungen gehören sichtbar auf die Seite. Die Klappe ist für Vertiefung, nicht für Pflichtinfos, das steht auch so auf der details-Seite.
Fragen als Marketing-Monolog. "Warum ist euer Angebot so großartig?" hat noch nie jemand gefragt. Echte Fragen, ehrliche Antworten, kurze Sätzze.

Weiter im Fahrplan: Landingpage · Referenz: details und summary