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. This feature can be very helpful on long FAQ pages and other similar content.

The Preferred Method

The easiest way is by inserting a Flex List Block in Layout Builder with the View Mode set to Accordion. Note that there is an option to display the block content as tabs on desktop that become  accordion hide reveals on mobile.

Search engines, like Google may interpret the structure of the content as indicating that certain information is supplementary or optional. Although, they may also index the content, especially FAQ content,  to use in Generative Search results. Other options below can be used to maximize keywords for search engine optimization (SEO).

Alternate Methods

There are two options for creating hide reveal accordions that require you to enter the HTML in the Source code: Detail Summary Tags and Semantic Hide Reveal Accordions.

Both methods can be used:

• on a Content Type that does not have Layout Builder, and therefore does not have the Flex List Block.
• within any Body field, including within another Block type. A common use case is to add the HTML for hide reveals within a Flex List Block body field that is displaying as a Tab layout.

The Semantic Hide Reveal Accordions can also be used:

• with headings for the trigger, in order to maximize keywords for search engine optimization (SEO).
• to slow down the open and close animation to improve the visual experience of clicking the content.

Click the Source Code button and follow these examples:

Details Summary Tags

This method will result in the same display as the Flex List Block above.

<details>
<summary>Click this trigger</summary>
Reveal this text.
</details>

Semantic Hide Reveal Accordion

Any HTML tag can be the trigger by adding the class “cofa-reveal-trigger”. Everything below a trigger and within the Div with the class “cofa-reveal” will be revealed.

To use this feature you will need to apply two classes:

1. cofa-reveal, to a div surrounding all hide reveal pairs.
2. cofa-reveal-trigger, on one or more clickable trigger texts.

You will not see the change in the editing interface. Only when viewing the page will the content be hidden and revealed.

Simple Example:

<div class="cofa-reveal">
<h2 class="cofa-reveal-trigger">
Click this H2 Tag trigger
</h2>
<p>
Reveal this text.
</p>
</div>

Example with semantic hierarchy:

<div class="cofa-reveal">
<h2 class="cofa-reveal-trigger">
Click this H2 Tag trigger
</h2>
<p>
Reveal this text.
</p>
</div>
<h3 class="cofa-reveal-trigger">
Click this H3 tag trigger
</h3>
<p>
Reveal this text.
</p>
<p class="cofa-reveal-trigger">
<strong>Click this strong paragraph text trigger.</strong>
</p>
<p>
Reveal this text
</p>
</div>

To apply other styles to a trigger or the content that is hidden, apply the hide and reveal styles first and then apply all other styles.

Troubleshooting

First check to make sure that you do not have an extra return between the the hide-reveal content div and the hide-reveal-trigger. This will throw off the script that turns the hide-reveal action on.

If you are using a hid reveal accordion to hide a floated image with text running alongside the image (left or right), you may find that your text is getting pressed up against the image.  The image below demonstrates what this might look like.

This issue tends to happen if you have more than one consecutive hide reveal accordion (with images floated next to text) but it can also happen in a single hide reveal accordion.

To resolve this issue always remember to apply the class of “clear-float” to the text running alongside your floated image. For a detailed description on how to use the “clear-float” class, see our instructions on left & right image alignment.