Adding Hide/Reveal Elements

Last Updated November 2025

Hide/Reveal, also referred to as Accordions, or Detail Summary widgets are a visible text link, we call a trigger, that when clicked reveals hidden text on the page.

Click the heading again and the text once again disappears.

This feature can be very helpful on long FAQ pages and other similar content.

The Easy Way

Whenever possible, simply use the Flex List Block in Layout Builder with the View Mode set to Accordion.

Alternate Ways

There are two options for creating hide reveal accordions that require you to edit the Source code.

Detail Summary Tags

For simple Hide-Reveals. The text within the <summary> tags will be the trigger to reveal the following text.

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

Semantic Hide-Reveal Accordion

If you need a more flexible layout or different semantic structure edit the Source Code and follow this example. 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 one or more hide revea pairs.
2. cofa-reveal-trigger, to the clickable trigger text

Click the Source Code button and follow these steps:

1. Find the clickable text – it can be normal paragraph text or a heading.
2. Paste the following code before the text: <div class="cofa-reveal">
3. In the tag for the Clickable Text, add the following class: class="cofa-reveal-trigger"
   1. Heading Text example: <h2 class="cofa-reveal-trigger">
   2. Paragraph Text example: <p class="cofa-reveal-trigger">
4. Find the end of the content you wish to hide and add the closing tag: </div>

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

Example:

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.

<div class="cofa-reveal">
<h2 class="cofa-reveal-trigger">
This is a H2 Tag trigger
</h2>
<p>
Some paragraph text hidden in the hide-reveal
</p>
<p class="cofa-reveal-trigger">
<strong>This is a paragraph tag trigger</strong>
</p>
<p>
Some paragraph text hidden in the hide-reveal
</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

If the Hide-Reveal is not working or doesn’t look right there are two known issues which could be the cause. If you are experiencing issues with the spacing between text and a floated image see our section on images with text.

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

Images with text

If you are using a Hide/Reveal 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/Real (with images floated next to text) but it can also happen in a single Hide/Reveal.

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.