Hide Reveal Accordions

Last updated June 2026

Hide-reveal accordion content allows visitors to click on a trigger to reveal or disclose additional content on the page. Consider carefully the pros, cons and best practices of using Accordions.

There are two ways to create a hide-reveal accordion:

• an Accordion block or
• a Details block

Accordion Block

You would use this block if you want the trigger to be a level 3 Heading. Just make sure to choose the correct heading level to allow for accessible navigation. To add multiple Accordion Blocks in a group, select the block and click the Add Block button in the lower right-hand corner.

Recommended configurations:

• Turn “Show icon” on, so an icon displays to indicate that it’s a clickable item.
• In a wide column choose for the icon to appear on the left so it is close to the trigger.
• Never select the option to automatically close accordions when a new one is opened because items that are opened or closed should remain in that state until the user chooses changes it.

Example:

Details Block

The trigger in a Details Block is regular text. You can still use styles like bold and italic, but this text is not a heading.

In the Advanced section of the block settings, you can assign a Name Attribute to group related Details Blocks together. This works like an accordion, where opening one closes the others in that group and is not recommended.

Example:

The thing you click (trigger)

The revealed content