Accordion — Documentation

Accordion is a set of collapsible panels for FAQs, product details, and any content you want to tuck away until clicked. It's built on the native <details>/<summary> elements, so panels open and close even before JavaScript loads — the block layers on smooth animation, single-open behavior, and optional FAQ schema on top.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Accordion. It starts with a couple of items. Each item is its own inner block: type the question into the header, and add any blocks you like inside the body.

Items

Add or remove panels like any inner blocks. Each item has:

Title — the header text, edited inline.
Body — any blocks (paragraphs, lists, images, other Axiom blocks).
HTML anchor — set one on an item to link straight to it (see Deep linking).

Behavior

Close others — keeps only one panel open at a time (accordion mode). Turn it off to allow several open at once.
First item open — the first panel starts expanded on load.
Expand / collapse all — adds a toggle button above the panels.
Deep linking — when on, opening a panel updates the URL hash, and loading the page with a matching #anchor opens that panel and scrolls to it.
Collapse on mobile — forces all panels closed on small screens regardless of the first-open setting.
Animation duration — milliseconds for the open/close transition.

Icon

Show icon toggles the indicator. Pick any icon from the library (default is a chevron), set its position (left or right of the title), and choose whether it rotates when the panel opens. Its color and size live in Styles → Icon.

Heading level

Heading level sets the title's tag (h2–h6) so the accordion fits your page outline correctly for accessibility and SEO.

FAQ schema

The block sidebar is split into two tabs. Settings is what the accordion does; Styles is how it looks, organised by the parts you can see.

Tab	Section	Covers
Settings	Behavior	Single-open, first-panel-open, deep linking, expand/collapse all, FAQ schema, items
Settings	Icon	Show, icon picker, position, rotation
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Container	The outer box around all items
Styles	Item	One accordion item
Styles	Header	The clickable question row
Styles	Body	The answer area
Styles	Icon	The open/close indicator
Styles	Spacing	Padding and margin on the outer wrapper

Styling

Each part gets the capabilities that make sense for it. Rows marked with a state selector carry Normal / Hover / Active values — pick the state at the top of the row and set a value for it.

Part	Rows
Container	Border, Radius, Shadow, Max width (per device), Item gap (per device)
Item	Background, Border, Radius, Shadow — with Normal / Hover
Header	Text, Background, Typography, Padding (per device) — with Normal / Hover / Active
Body	Text, Background, Border, Radius, Padding (per device), Max width (per device)
Icon	Color with Normal / Active, Size (per device)
Spacing	Padding and margin on the outer block

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

// terminalhtml

<div class="ab-accordion has-icon ab-accordion--icon-right ab-accordion--rotate" data-close-others="1" data-duration="300">
  <details class="ab-accordion__item" open>
    <summary class="ab-accordion__header">
      <h3 class="ab-accordion__title">What is your refund policy?</h3>
      <span class="ab-accordion__icon"><svg>…</svg></span>
    </summary>
    <div class="ab-accordion__body">
      <div class="ab-accordion__body-inner"><p>30 days, no questions asked.</p></div>
    </div>
  </details>
</div>

When FAQ schema is enabled, a <script type="application/ld+json"> with the FAQPage data is printed after the block. Header colors, padding, borders, and icon size are all --ab-acc-* custom properties on the wrapper.