Запитання й відповіді, які клієнт доповнює сам

Що вийде

<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>

Покроково

1. Список — на блок із запитаннями

   fld-loop на обгортці, усередині якої йдуть усі <details>.

   <div class="faq__list" fld-loop="Questions">

2. Запитання

   Текст запитання в <summary> — короткий рядок, fld-text.

   <summary fld-text="Question">Do you take bookings?</summary>

3. Відповідь

   Відповідь буває на кілька рядків — fld-area: перенесення рядків, які зробить клієнт, збережуться.

   <p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>

4. Кожне запитання розмічене

   Усі <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>

Що важливо

• Відповідь із форматуванням — посиланнями, списком — зробіть полем fld-editor на обгортці відповіді.
• Стрілку чи плюс біля запитання малюйте стилями summary, а не окремим елементом перед запитаннями.

Типові помилки

Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.

<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>

<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>

Атрибути в рецепті

Ще рецепти