Fragen und Antworten, die dein Kunde selbst ergänzt
Fragen kommen von Käufern, nicht aus dem Design, deshalb muss die Liste ohne Entwickler wachsen. Hier ist sie mit <details> gebaut: Der Browser klappt eine Frage von selbst auf, ein Skript ist nicht nötig.
Das Ergebnis
<section class="faq">
<h2 fld-text="FAQ title">Questions</h2>
<div class="faq__list" fld-loop="Questions">
<details class="faq__item">
<summary fld-text="Question">Do you take bookings?</summary>
<p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>
</details>
<details class="faq__item">
<summary fld-text="Question">Is there oat milk?</summary>
<p fld-area="Answer">Oat and almond, at no extra charge.</p>
</details>
</div>
</section>Die dritte Frage hat der Kunde im Adminbereich hinzugefügt.
Schritt für Schritt
Die Liste kommt an den Block mit den Fragen
fld-loop an der Hülle, in der alle
<details>stehen.<div class="faq__list" fld-loop="Questions">
Die Frage
Die Frage in
<summary>ist eine kurze Zeile, also fld-text.<summary fld-text="Question">Do you take bookings?</summary>
Die Antwort
Eine Antwort kann mehrere Zeilen lang sein, deshalb fld-area: Die Zeilenumbrüche deines Kunden bleiben erhalten.
<p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>
Jede Frage ist markiert
Alle
<details>tragen dieselben Attribute. Dann bringt „Daten laden“ jede Frage in den Adminbereich.<details class="faq__item"> <summary fld-text="Question">Is there oat milk?</summary> <p fld-area="Answer">Oat and almond, at no extra charge.</p> </details>
Worauf es ankommt
- Eine Antwort mit Formatierung, etwa mit Links oder einer Liste, wird zum Feld fld-editor an der Hülle der Antwort.
- Den Pfeil oder das Plus einer Frage zeichnest du mit Stilen für
summary, nicht mit einem eigenen Element vor den Fragen.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<div class="faq__list" fld-loop="Questions">
<div class="faq__line"></div>
<details class="faq__item">
<summary fld-text="Question">Do you take bookings?</summary>
<p fld-area="Answer">Only for groups.</p>
</details>
</div>Eine Zierlinie in der Liste vor der ersten Frage: Der Build überspringt sie, schreibt es ins Protokoll, und die Linie wird nicht angezeigt.
<div class="faq__line"></div>
<div class="faq__list" fld-loop="Questions">
<details class="faq__item">
<summary fld-text="Question">Do you take bookings?</summary>
<p fld-area="Answer">Only for groups.</p>
</details>
</div>Dekoration gehört außerhalb der Liste.