Accordion

Components accordion

Collapsible items — expand one at a time.

Markup

Drops in as data-pb-block="accordion".

html

<div data-pb-block="accordion" class="pb-accordion" style="max-width:36rem;border:1px solid #e2e8f0;border-radius:0.75rem;overflow:hidden;">
  <div class="pb-accordion__item" x-data="{ open: true }" style="border-bottom:1px solid #e2e8f0;">
    <button type="button" class="pb-accordion__header" @click="open = !open" :aria-expanded="open" style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;border:0;background:#fff;font-weight:600;color:#0f172a;text-align:left;cursor:pointer;">
      <span>First item</span>
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="open ? 'transform:rotate(180deg)' : ''" style="transition:transform 0.2s ease;"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <div class="pb-accordion__body" x-show="open" x-cloak style="padding:0 1.25rem 1rem;color:#475569;line-height:1.6;"><p style="margin:0;">Body content for the first item.</p></div>
  </div>
  <div class="pb-accordion__item" x-data="{ open: false }" style="border-bottom:1px solid #e2e8f0;">
    <button type="button" class="pb-accordion__header" @click="open = !open" :aria-expanded="open" style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;border:0;background:#fff;font-weight:600;color:#0f172a;text-align:left;cursor:pointer;">
      <span>Second item</span>
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="open ? 'transform:rotate(180deg)' : ''" style="transition:transform 0.2s ease;"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <div class="pb-accordion__body" x-show="open" x-cloak style="padding:0 1.25rem 1rem;color:#475569;line-height:1.6;"><p style="margin:0;">Body content for the second item.</p></div>
  </div>
  <div class="pb-accordion__item" x-data="{ open: false }">
    <button type="button" class="pb-accordion__header" @click="open = !open" :aria-expanded="open" style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.25rem;border:0;background:#fff;font-weight:600;color:#0f172a;text-align:left;cursor:pointer;">
      <span>Third item</span>
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="open ? 'transform:rotate(180deg)' : ''" style="transition:transform 0.2s ease;"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
    <div class="pb-accordion__body" x-show="open" x-cloak style="padding:0 1.25rem 1rem;color:#475569;line-height:1.6;"><p style="margin:0;">Body content for the third item.</p></div>
  </div>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="accordion" so it imports as a labelled, editable component.
Interactive out of the box: Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.