Questions and answers the client adds to
Questions come from customers, not from the design, so the list has to grow without a developer. Here it is built on <details>: the browser opens a question by itself, no script needed.
What you get
<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>The client added the third question in the admin.
Step by step
The list goes on the block of questions
fld-loop on the wrapper that holds all the
<details>.<div class="faq__list" fld-loop="Questions">
The question
The question in
<summary>is a short line, fld-text.<summary fld-text="Question">Do you take bookings?</summary>
The answer
An answer can run to several lines, so it is fld-area: the line breaks the client makes are kept.
<p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>
Every question is marked up
All
<details>carry the same attributes, so “Load data” brings every question into the admin.<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>
What matters
- For an answer with formatting, such as links or a list, make it an fld-editor field on the answer’s wrapper.
- Draw the arrow or plus of a question with
summarystyles, not with a separate element before the questions.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<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>A decorative line inside the list before the first question: the build skips it, logs it, and the line is not shown.
<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>Decoration goes outside the list.