Preguntas y respuestas que el cliente añade por su cuenta
Las preguntas llegan de los compradores, no del diseño, así que la lista tiene que crecer sin un desarrollador. Aquí se construye con <details>: el navegador despliega cada pregunta por sí solo, sin ningún script.
Qué obtienes
<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>El cliente añadió la tercera pregunta en el panel.
Paso a paso
La lista va en el bloque de preguntas
fld-loop en el contenedor que agrupa todos los
<details>.<div class="faq__list" fld-loop="Questions">
La pregunta
El texto de la pregunta, en
<summary>, es una línea corta: fld-text.<summary fld-text="Question">Do you take bookings?</summary>
La respuesta
Una respuesta puede ocupar varias líneas, así que es fld-area: los saltos de línea que haga el cliente se conservan.
<p fld-area="Answer">Only for groups of six or more. Call us a day ahead.</p>
Cada pregunta, marcada
Todos los
<details>llevan los mismos atributos: así «Cargar datos» lleva al panel todas las preguntas.<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>
Lo importante
- Para una respuesta con formato, con enlaces o una lista, usa un campo fld-editor en el contenedor de la respuesta.
- Dibuja la flecha o el signo más de cada pregunta con estilos de
summary, no con un elemento aparte antes de las preguntas.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<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>Una línea decorativa dentro de la lista, antes de la primera pregunta: la generación la omite, lo anota en el registro, y la línea no se muestra.
<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 decoración va fuera de la lista.