docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. FAQ

FAQ ​

A frequently asked questions block. Each row is a question title and answer text. Answers may include richtext HTML.

FAQ

Why FAQ in PageBuilder ​

  • Questions edit as a repeater list, reorder by drag
  • Answers can be richtext with links and lists
  • One block handles common objections on a landing page

Typical pages ​

  • Support or knowledge base page
  • Landing page: objections before the form
  • Product page: shipping, warranty, care

Page examples ​

Repeater structure ​

Questions repeater: Question and Answer per row. Row order matches front-end order.

Similar sections ​

  • Tabs for long copy split into panels
  • Rich text for unstructured body text

Block parameters ​

ParameterValue
keyfaq
LayerFree
Categorycontent (content)
Chunkpagebuilder_faq
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Questions (items) ​

Type repeater. Required. Repeatable rows. "Add" button in the inspector.

Each row:

FieldTypeLabelRequired
questiontextQuestionyes
answerrichtextAnsweryes

Site output ​

pb-faq with a question list. Markup supports accordion via pagebuilder-sections.js or a static list in your theme.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "items": [
    {
      "_rowId": "00000000-0000-4000-8000-000000000001",
      "question": "How do I place an order?",
      "answer": "<p>Add a product to the cart and proceed to checkout.</p>"
    }
  ]
}

Chunk template ​

Fenom chunk pagebuilder_faq:

fenom
<section class="pb-section pb-section--faq pb-faq{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="faq"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-faq__inner">
    {if $title}
      <h2 class="pb-heading pb-faq__title">{$title|pb_text}</h2>
    {/if}
    <div class="pb-faq__list">
      {foreach $items as $item}
        <details class="pb-faq__item">
          <summary class="pb-faq__question">{$item.question|pb_text}</summary>
          <div class="pb-faq__answer pb-richtext__content">{$item.answer}</div>
        </details>
      {/foreach}
    </div>
  </div>
</section>

See also ​