Native Interaktion: details & summary

Ein aufklappbarer Bereich ganz ohne JavaScript

<details> und <summary> bauen ein aufklappbares Element - früher brauchte man dafür immer JavaScript, heute übernimmt der Browser das komplett:

<details>
  <summary>Was ist im Preis enthalten?</summary>
  <p>Frühstück, WLAN und Parkplatz sind im Preis inbegriffen.</p>
</details>

<summary> ist die immer sichtbare Überschrift - ein Klick darauf klappt den Rest auf oder zu
Alles außerhalb von <summary>, aber innerhalb von <details>, ist der Inhalt, der ein-/ausgeblendet wird
Kein JavaScript nötig - Klick-Handling, Tastatur-Bedienung (Enter/Space) und Ein-/Ausklapp-Pfeil bringt der Browser von Haus aus mit

Standardmäßig offen: das `open`-Attribut

<details open>
  <summary>Diese Sektion ist beim Laden schon aufgeklappt</summary>
  <p>Inhalt...</p>
</details>

Styling: den Standard-Pfeil anpassen

<summary> bekommt vom Browser automatisch ein kleines Dreieck als Marker - genau wie ein <li> einen Listenpunkt hat. Stylen lässt sich das über ::marker:

summary {
  cursor: pointer;
  font-weight: 600;
}

summary::marker {
  content: "▶ ";
  color: #2563eb;
}

details[open] summary::marker {
  content: "▼ ";
}

::marker ist ein Pseudo-Element - genau wie ::first-letter aus dem Selektoren-Kapitel, nur eben für den Listenpunkt/Pfeil
Der Attribut-Selektor details[open] (siehe Selektoren-Kapitel) trifft nur, wenn <details> gerade offen ist - so lässt sich der Pfeil beim Aufklappen drehen

Praxisbeispiel: eine FAQ-Sektion

<div class="faq">
  <details>
    <summary>Wie lange dauert der Versand?</summary>
    <p>In der Regel 2-3 Werktage.</p>
  </details>
  <details>
    <summary>Kann ich meine Bestellung stornieren?</summary>
    <p>Ja, bis zum Versand jederzeit über euer Kundenkonto.</p>
  </details>
</div>

.faq details {
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
}

Fortgeschritten: exklusive Gruppen mit `name`

Mehrere <details>-Elemente mit demselben name-Attribut verhalten sich wie Radio-Buttons: Öffnet ihr eines, schließen sich die anderen automatisch:

<details name="faq-gruppe">
  <summary>Frage 1</summary>
  <p>Antwort 1</p>
</details>
<details name="faq-gruppe">
  <summary>Frage 2</summary>
  <p>Antwort 2</p>
</details>