Accordion
Collapsible sections visitors open one at a time.
Usage
The Accordion block holds Accordion Section blocks, one per section. Each section shows its title with an arrow; a visitor clicks or taps the title to open the content, and again to close it. Sections open and close without any script, work from the keyboard (Tab to a title, Enter or Space to open it), and show your site's focus ring.
Use it for content that isn't questions and answers: service descriptions, menu sections, policies, specifications, steps. If your sections are real questions with answers, use the FAQ block instead: it looks the same and labels the questions for search engines. The Accordion adds no FAQ data to the page.
Sections
Type the title in the section header. Add the content below: paragraphs by default, or insert other blocks (headings, lists, images, buttons, columns, a Grid, a form). Every section stays open in the editor so it's easy to edit; the live site starts with them closed unless you turn on Start open.
Use Add Section below the last section to add more. When a section is selected, use the block toolbar breadcrumb, parent button, or List View to get back to the Accordion.
Style
Select the Accordion (the parent) to pick a look for every section:
- Outlined — bordered sections with spacing (default)
- Cards — filled section backgrounds
- Compact — one framed list with a line between sections
- Separator — a flush list with lines between sections
- Naked — titles and content only, no borders
One open at a time
Turn on One open at a time so opening a section closes the others. Leave it off and visitors can open as many as they like.
Title Tag and Title Style
- Title Tag — whether section titles are headings in the page outline. None (default) keeps them as plain labels, which suits short titles like "Shipping" or "Hours". Pick h2–h6 when each section is a real part of the page, such as the chapters of a policy, and match the level to the headings around the block.
- Title Style — how titles look, using your Customizer text styles. It's separate from the tag, so a plain label can look like an H3.
Start open (section)
Select a section and turn on Start open so it's already open when the page loads: the one visitors should read first, or a section a link points to. With One open at a time, a visitor's first click closes it.
Switching from FAQ
Many sites used the FAQ block as a plain accordion. To switch one, select the FAQ block, open the block type menu in its toolbar, and choose Accordion. Its style, title level and style, questions and answers carry over; a background photo on a FAQ card doesn't. The same menu switches an Accordion back to a FAQ.
Block width
Accordion supports Wide and Full alignment from the block toolbar.
Tips
- Keep titles short and specific: visitors scan them to decide what to open.
- Put the most-wanted section first and turn on Start open for it.
- In Chrome and Edge, the browser's find-in-page also searches closed sections and opens the one with a match.
Settings
Settings
The look for every section. Select the parent Accordion block to change it. The same five looks as FAQ, so a FAQ switched to an Accordion keeps its style.
Opening a section closes the others. Off, visitors can open as many as they like.
Whether section titles are headings in the page outline. None keeps them as plain labels, which suits short titles. Pick h2–h6 when each section is a real part of the page, matching the headings around the block.
How each title looks. It's separate from Title Tag, so a plain label can look like an H3.
Settings
This section is already open when the page loads. In the editor every section stays open. With One open at a time, a visitor's first click on another section closes it.