Des questions et réponses que le client complète lui-même
Les questions viennent des acheteurs, pas de la maquette : la liste doit donc grandir sans développeur. Ici, elle repose sur <details> : le navigateur ouvre la question tout seul, sans aucun script.
Ce que vous obtenez
<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>Le client a ajouté la troisième question dans l’administration.
Étape par étape
La liste sur le bloc des questions
fld-loop sur le conteneur qui regroupe tous les
<details>.<div class="faq__list" fld-loop="Questions">
La question
Le texte de la question, dans
<summary>, est une ligne courte : fld-text.<summary fld-text="Question">Do you take bookings?</summary>
La réponse
Une réponse tient souvent sur plusieurs lignes : fld-area conserve les retours à la ligne du client.
<p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>
Chaque question balisée
Tous les
<details>portent les mêmes attributs : « Charger les données » importe alors toutes les questions dans l’administration.<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>
À retenir
- Pour une réponse mise en forme, avec des liens ou une liste, utilisez un champ fld-editor sur le conteneur de la réponse.
- Dessinez la flèche ou le plus de la question avec les styles de
summary, pas avec un élément à part placé avant les questions.
Erreurs fréquentes
Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.
<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>Une ligne décorative dans la liste, avant la première question : la génération l’ignore, le signale dans le journal, et la ligne n’est pas affichée.
<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>La décoration se place hors de la liste.