Last updated:

October 9, 2025

UW Accordion

Organize content into sections that can expand or collapse. Best for FAQs, instructions, or content that doesn’t always need to be visible.

Block preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

How to use

Insert the block

Using the Block Inserter (+ icon), search for UW Accordion and select it. You can also type
/uw accordion in a new paragraph block and press Enter to add it quickly.

Add a new accordion item

Use the Add an accordion item button below the accordion to create additional panels.

Add inner content

Select an individual accordion item and click on Add block (small button with plus icon) in the lower right to choose a block inside an individual item (e.g., images, lists, headings).

Remove an accordion item

You can delete a block using the three-dot menu next to the block in either List View or the Block Toolbar.

Change heading levels

Use the Block Toolbar to update the heading level (H1-H6) of accordion titles so they follow the previous heading level and maintain correct hierarchy.

Adjust spacing

Adjust the top and bottom margin in the block styles to adjust spacing between blocks above and below your accordion.

Known limitations

It’s not possible to link to individual accordion items at this time.

Recommendations

Accordions can make long pages easier to scan, but hiding content isn’t always the best choice. Use this guidance to decide when an accordion adds value and when it could hurt usability.

When to use

Break down long content into manageable sections users can expand as needed.
Present related topics in a compact way, like FAQs or grouped resources.
When readers only need a few key pieces of information and the rest can be “hidden.”
When users are primarily viewing your site on mobile.
Improve scannability, letting users see high-level headings first.

When to consider something else

If information is essential to read. Show it on the page instead.
When hiding most content would make the page look empty or require constant expanding.
Content is short or you’re only aiming for a “cleaner” look.
If there are only 3-4 categories but lots of content (tabs might be better).
Content is long or complex, such as tables, large forms, or interactive elements.
Avoid overusing accordions. Hiding too much content can make pages harder to scan and use.

Usability and accessibility

Limit the number of accordion items; too many can be overwhelming.
Keep titles short and clear to make content easily scannable.
Avoid nested accordions or tabs. These can be difficult for screen readers to navigate.
Use caution with complex content like tables, grids, or multi-column layouts. Keep it simple.
Follow proper heading order; adjust accordion headings so they fit into your page’s structure.