Accordion

Overview

A Bootstrap 5 collapsible accordion with parent/child block architecture for organizing content into expandable panels.

Usage

The Accordion block implements Bootstrap 5’s accordion component through a three‑tier nesting structure: Accordion → Accordion Item → Accordion Body. Only one item is expanded at a time — clicking an item collapses the previously open one (standard Bootstrap accordion behavior).

1. Insert an Accordion block.
2. Add Accordion Item blocks inside it.
3. Edit each item’s headline via the inline RichText control or the Inspector’s “Toggle Headline” field.
4. Place any content inside each item’s Accordion Body.

The first item is expanded by default. In the editor, clicking an item’s header toggles it open/closed and updates the parent’s openItem attribute.

Child Blocks

Accordion (method/accordion)

• Block name: method/accordion
• Category: method-component-blocks
• Supports: align (wide)
• Render type: Dynamic (PHP render_callback)
• Inner blocks: Yes — method/accordion-item only

The outermost wrapper. Generates a unique accordionId for Bootstrap’s data-bs-parent targeting. Duplicate detection ensures copied accordions get fresh IDs.

Accordion Item (method/accordion-item)

• Parent: method/accordion
• Allowed children: method/accordion-body (template‑locked)

An individual collapsible panel. Contains a headline button and an inner body area.

Inspector controls: A “Toggle Headline” TextControl in an “Item Options” PanelBody. The headline can also be edited inline via RichText (supports bold and italic).

Accordion Body (method/accordion-body)

• Parent: method/accordion-item
• Inner blocks: Accepts any blocks (default template: one core/paragraph)

The content area within each item. Accepts any inner blocks.

No custom attributes or inspector controls.

Control Sets

The Accordion block family does not use Method’s shared control components (no MethodSpacingControls, MethodStyleTag, etc.). Styling is handled entirely through Bootstrap 5’s accordion CSS classes and can be customized via theme stylesheets.

Data

• Block context: Accordion Item reads its parent’s accordionId and openItem via useSelect on the blockEditorStore, and auto‑syncs itemIndex and parentAccordionId via useEffect.
• Duplicate handling: When an Accordion is duplicated, the edit component detects that another block shares the same accordionId and regenerates it using the new clientId

Frontend Rendering

<div class="method-accordion">
  <div class="accordion" id="accordion-{accordionId}">

    <!-- Per item -->
    <h2 class="accordion-header">
      <button class="accordion-button {collapsed?}"
              type="button"
              aria-expanded="true|false"
              aria-controls="collapse{n}"
              data-bs-toggle="collapse"
              data-bs-target="#collapse{n}">
        {headline}
      </button>
    </h2>
    <div class="accordion-item">
      <div class="accordion-collapse collapse {show?}"
           id="collapse{n}"
           data-bs-parent="#accordion-{accordionId}">
        <div class="accordion-body">
          <div class="accordion-body-inner">
            {inner content}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="method-accordion">
  <div class="accordion" id="accordion-{accordionId}">

    <!-- Per item -->
    <h2 class="accordion-header">
      <button class="accordion-button {collapsed?}"
              type="button"
              aria-expanded="true|false"
              aria-controls="collapse{n}"
              data-bs-toggle="collapse"
              data-bs-target="#collapse{n}">
        {headline}
      </button>
    </h2>
    <div class="accordion-item">
      <div class="accordion-collapse collapse {show?}"
           id="collapse{n}"
           data-bs-parent="#accordion-{accordionId}">
        <div class="accordion-body">
          <div class="accordion-body-inner">
            {inner content}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

The first item (itemIndex === 1) renders with show class and aria-expanded="true". All others render collapsed.

Filters

This block does not currently expose dedicated PHP filters. Accordion styling is controlled by Bootstrap 5’s accordion component CSS, which can be overridden in a child theme’s stylesheet.