Aufklappen mit details

Aufklappbare Bereiche baut man oft mit JavaScript nach, obwohl HTML sie mitbringt. Zwei Elemente, kein Skript.

01 / 04details und summary

<details>
  <summary>Wie lange hält die Suppe im Kühlschrank?</summary>
  <p>Drei Tage. Danach lieber einfrieren.</p>
</details>

Probier es aus: Ein Klick auf die Frage klappt die Antwort auf, ein weiterer schließt sie wieder. Kein JavaScript beteiligt. (Tut sich nichts, ist noch das Fadenkreuz an, dann fängt der Inspector den Klick ab.)

details ist der Behälter. summary ist die sichtbare, klickbare Zeile und steht als erstes Kind darin. Alles Weitere im details ist der Inhalt, der ein- und ausgeklappt wird: Absätze, Listen, Bilder, was du willst.

Das Dreieck davor stellt der Browser selbst, und wie es aussieht, unterscheidet sich je nach Browser.

02 / 04Was du geschenkt bekommst

Das ist der eigentliche Punkt an diesen beiden Elementen. Ein nachgebautes Aufklappen aus div plus Klick-Handler müsste all das selbst mitbringen:

• Tastaturbedienung. Die Zeile ist mit Tab erreichbar und mit Eingabe oder Leertaste zu bedienen.
• Sichtbarer Fokus. Der Browser zeichnet den Fokus-Ring von allein.
• Korrekte Ansage. Ein Screenreader meldet die Zeile als aufklappbar und sagt, ob sie gerade offen oder geschlossen ist.
• Seitensuche. Moderne Browser finden Text auch in geschlossenen details und klappen sie beim Treffer auf. Bei einem selbstgebauten Aufklappen mit versteckten Inhalten passiert das nicht.

Vier Dinge, die man leicht vergisst, und zusammen der Grund, warum die eingebaute Lösung meistens gewinnt.

03 / 04Mehrere untereinander

<h2>Häufige Fragen</h2>

<details open>
  <summary>Kann ich die Suppe einfrieren?</summary>
  <p>Ja, portionsweise bis zu drei Monate.</p>
</details>

<details>
  <summary>Geht das Rezept auch vegan?</summary>
  <p>Ja, einfach die Butter durch Öl ersetzen.</p>
</details>

<details>
  <summary>Welche Linsen soll ich nehmen?</summary>
  <p>Braune oder grüne. Rote zerfallen zu schnell.</p>
</details>

Mehrere details untereinander ergeben eine FAQ-Liste. Jedes arbeitet für sich, mehrere können gleichzeitig offen sein.

Das Boolean-Attribut open am ersten Eintrag lässt ihn aufgeklappt starten. Praktisch, wenn eine Frage besonders häufig gestellt wird oder wenn der erste Eintrag zeigen soll, dass hier überhaupt etwas aufklappbar ist.

Und ein Detail zum Merken: open bleibt nicht stehen. Klappt der Nutzer etwas auf und lädt die Seite neu, ist der Zustand wieder der aus dem Markup.

04 / 04Grenzen

<details>
  <p>Hier steht kein summary, also erfindet der Browser eine Beschriftung.</p>
</details>

Fehlt das summary, erfindet der Browser eine Beschriftung, meist das Wort „Details“ auf Englisch. Angezeigt wird also etwas, gültig ist es trotzdem nicht: Der Validator verlangt ein summary als erstes Kind. Schreib es immer.

Das echte Akkordeon, bei dem sich der vorherige Eintrag schließt, sobald man einen neuen öffnet, war lange nur mit JavaScript möglich. Seit September 2024 können das alle großen Browser auch ganz ohne JavaScript:

<details name="faq" open>
  <summary>Kann ich die Suppe einfrieren?</summary>
  <p>Ja, portionsweise bis zu drei Monate.</p>
</details>

<details name="faq">
  <summary>Geht das Rezept auch vegan?</summary>
  <p>Ja, einfach die Butter durch Öl ersetzen.</p>
</details>

<details name="faq">
  <summary>Welche Linsen soll ich nehmen?</summary>
  <p>Braune oder grüne. Rote zerfallen zu schnell.</p>
</details>

Geben mehrere details denselben name, gehören sie zur selben Gruppe, und der Browser schließt beim Öffnen eines Eintrags automatisch die anderen. Probier es aus: Egal welche Frage du aufklappst, die vorherige geht zu.

Bevor du das baust, überleg trotzdem kurz, ob es wirklich nötig ist: In den meisten FAQ-Listen stört es niemanden, wenn zwei Antworten gleichzeitig offen stehen, und wer zwei Antworten vergleichen will, ärgert sich über das Zuklappen.