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 unless the accordion’s Initially Closed option is on; the headline element is chosen with Headline Tag (h1–h6, default h2). 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, and provides it, hTag and closed to its items as block context (method-accordion/accordionId, method-accordion/hTag, method-accordion/closed). Duplicate detection ensures copied accordions get fresh IDs.

Inspector controls: An “Accordion Options” PanelBody with the Initially Closed ToggleControl and the Headline Tag SelectControl.

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. The render callback reads accordionId, hTag and closed from the method-accordion/* context the parent provides.
• Element ids: getAccordionElementId() / getAccordionCollapseId() in lib/blocks/utils/accordionId.js (editor and save) and their PHP twins method_accordion_element_id() / method_accordion_collapse_id() build accordion-{accordionId} and accordion-{accordionId}-collapse-{itemIndex}, so two accordions on one page never share a panel id.
• 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>

Each item prints <{hTag} class="accordion-header"> holding the toggle button.accordion-button (with collapsed when the panel starts closed), followed by the saved wrapper. The Accordion Item render callback decides the panel’s id (accordion-{accordionId}-collapse-{itemIndex}), its data-bs-parent (#accordion-{accordionId}) and the show class itself, rewriting the saved .accordion-collapse with WP_HTML_Tag_Processor from the same values the button is printed with — so content saved before beta28 (id="collapse1", repeated across accordions) renders with unique, matching ids without being re-saved. The first item (itemIndex === 1) renders open with aria-expanded="true" unless closed is set; 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.

Changelog