Hide/Reveal, sometimes referred to as Accordions, are a visible text link 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.
To use this feature you will need to apply two classes:
- hide-reveal-trigger, to the clickable text
- hide-reveal, to the text block
To do this you will use the Create Div Container button, .
- Select the clickable text. It can be normal paragraph text or a heading.
- Click on the the Create Div Container button.
- Type hide-reveal-trigger to the pop-up form’s Stylesheet Classes field and click OK.
- Select all of the content you wish to hide. It can include headings, images and other types of content.
- Click on the the Create Div Container button again.
- Type hide-reveal to the pop-up form’s Stylesheet Classes field and click OK.
You will not see the change in the editing interface. Only when viewing the page will the content be hidden and revealed.
Apply Semantic Structure
Any trigger, no matter what the semantic heading level, is supposed to look the same. To apply headings and 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.
Your screen should look like this:
This is what it will look like with an extra return between the Hide-Reveal Trigger and the Hide-Reveal Content (notice the larger gap):
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.