Accordions
A group of accordion rows with shared, one-click settings.
The Accordions block groups several accordion rows together so you can manage them as a set. It is the natural container for a full FAQ, or any list of collapsible items that share the same open-close behaviour.
Its value is shared settings. Change a behaviour once on the group and it applies to every accordion inside.
Adding one
- Select the section or container to hold the group.
- Open the inserter and search "accordions".
- Pick the Accordions block, then add individual Accordion blocks inside it.
Settings
In the accordions group's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Open by default | Every row in the group starts open instead of closed | Rarely; more useful on a single accordion than a whole set |
| Group | Shared group name so only one row is open at a time; opening one closes the rest | The classic FAQ behaviour |
| Linked | Keeps the group rows in sync with a named external trigger | You need to open or close the set from outside the group |
| Transition | Length of the open/close animation, or off so rows snap | Off is kinder to reduce-motion; shorter values feel snappier on mobile |
Styling
The group itself is a container, so spacing, colour, borders, and layout are all in the shared design panel. Style the header and content of each accordion row separately to control how the closed and open states look.
Accessibility
Write accordion headers that name what is behind them, so a visitor scanning with a screen reader can choose without opening first. Keep a real heading element in each header block rather than text styled to look like one.
If the set uses animation, visitors with the reduce-motion preference set will still see the rows open and close, so keep transition durations short or use the off setting.