Вопросы и ответы, которые клиент дополняет сам
Вопросы приходят от покупателей, а не из макета, поэтому список должен расти без разработчика. Здесь он построен на <details>: вопрос раскрывается в браузере сам, никакого скрипта не нужно.
Что получится
<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>Третий вопрос клиент добавил в админке.
Пошагово
Список — на блок с вопросами
fld-loop на обёртке, внутри которой идут все
<details>.<div class="faq__list" fld-loop="Questions">
Вопрос
Текст вопроса в
<summary>— короткая строка, fld-text.<summary fld-text="Question">Do you take bookings?</summary>
Ответ
Ответ бывает в несколько строк — fld-area: переносы, которые сделает клиент, сохранятся.
<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>
Что важно
- Ответ с форматированием — ссылками, списком — сделайте полем 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>Декор — снаружи списка.