SlowlyAccordion
Collapsible rows, the building block of FAQs and any list of labels that open to more.
An accordion is a row that stays closed until clicked, then opens to reveal its content. It is what FAQs are built from, and anywhere a list of labels should each open to more. For a line or two, use a paragraph instead.
Made of three blocks, added together:
- Accordion wraps one row and controls how it opens.
- Accordion header is the visible label and the click target.
- Accordion content is what shows and hides.
The header starts with a heading, the content with a paragraph, and both are ordinary blocks: the header can hold an icon and heading, the content can hold images, columns, or a query. Click a header in the editor to open its row.
Adding one
- Select the section or container to hold it.
- Open the inserter, search "accordion".
- Pick the accordion block.
For a full FAQ, repeat the accordion in one container or use the accordions block. Inside a query or repeater, one accordion repeats per post or product.
Settings
In the accordion's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Open by default | Row starts open instead of closed | The first item in a list, or a lone accordion |
| Group | Shared group name, one open at a time; opening one closes the rest | The classic FAQ behaviour |
| Transition | Length of the open/close animation, or off so the row snaps | Off is kinder to reduce-motion |
Styling
Same design panel as every block: spacing, type, colour, borders, effects, each per breakpoint. The one accordion-specific point is that the header and content are separate blocks, so style them separately to control the closed and open states.
Accessibility
- Write headers that name what is behind them, so anyone scanning or using a screen reader can choose without opening first.
- Keep a real heading in the header, not text styled to look like one.