Skip to content
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Accordion

Accordion

Section accordion renders panels as <details>. There is no extra JavaScript. Chunk: pagebuilderpro_accordion. Requires PageBuilder Pro.

open marks whether a panel is open by default.

Where it fits

  • A short FAQ without the FAQ section
  • Terms and caveats
  • Expanding blocks in an article

Fields

FieldTypeRequiredPurpose
titletextnoSection title
itemsrepeateryesPanels
items.titletextyesPanel title
items.bodytextareayesText
items.opentogglenoOpen by default

Render

Each row is <details class="pb-accordion__item">. The open attribute is set when items.open is true. The section loads no JavaScript. An empty repeater leaves an empty div.pb-accordion__list.

Section data

json
{
  "title": "Terms",
  "items": [
    { "title": "Delivery", "body": "Next day in the city", "open": true }
  ]
}

Similar sections

  • FAQ for a ready FAQ block
  • Tabs when panels switch instead of expanding