FAQs nur mit HTML

Ein FAQ-Akkordeon (seit 2020) wird mit den nativen HTML-Tags <details> und <summery> erstellt, wodurch kein JavaScript erforderlich ist.
Diese Methode ist barrierefrei, kompakt und kann CSS (jedoch jetzt in 2026 nur bedingt) für das Styling nutzen.

Klicks auf <summery> öffnen den zugehörigen Antwortteil, wobei CSS-Effekte (z.B. Pfeildrehungen) hinzugefügt werden können.

Auf der Seite wird über den Quellcode-Editor dieses eingefügt:

<details>
<summary>Wie heißt der Kriminalhund aus Österreich?</summary>
<p>Antwort 1: Rex</p>
</details>
<details>
<summary>Was passiert, wenn Pinocchio sagt: „Meine Nase wird jetzt wachsen“?</summary>
<p>Antwort 2: Manche Fragen bleiben besser unbeantwortet.</p>
</details>
<details>
<summary>Wie viel Holz würde ein Murmeltier werfen?</summary>
<p>Antwort 3: Ein Murmeltier würde so viel Holz werfen, wie es werfen könnte, wenn ein Murmeltier Holz werfen könnte!</p>
</details>

Um die Antwort zu sehen, klicke auf die Frage oder den Pfeil.

Um eine weitere Frage und Antwort hinzuzufügen, musst du das hinzufügen (Zahl entsprechend ändern):

<details>
<summary>Frage 4</summary>
<p>Antwort 4</p>
</details>

Textgestaltungen sind auch möglich.
Ich lasse die Antwort 1 in rot ausgeben; dazu ändere ich die Zeile so: <p style="color: red;">Antwort 1: Rex</p>
Ich lasse den Hintergrund der Antwort 2 in orange ausgeben; dazu ändere ich die Zeile so: <span style="background-color: #ff6600;">Manche Fragen bleiben besser unbeantwortet.</span></p>

So sieht das Ergebnis aus.
Um die Antwort zu sehen, klicke auf die Frage oder den Pfeil.

Ein Artikel auf web.dev beschreibt zwar, dass es funktioniert, aber ich war bisher erfolglos, das Dreieck gegen etwas anderes austauschen zu können. 
Ich habe hier auf meiner Testseite (PHP8.5) es auch hinbekommen, dass die Antworten farblich markiert werden, doch hier (PHP7.4) funktioniert dieses Template nicht.