Adding Hide/Reveal Elements

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:

  1. hide-reveal-trigger, to the clickable text
  2. hide-reveal, to the text block

To do this you will use the Create Div Container buttonDiv - style inserting button.

  1. Select the clickable text. It can be normal paragraph text or a heading.
  2. Click on the the  Create Div Container button.
  3. Type hide-reveal-trigger to the pop-up form’s Stylesheet Classes field and click OK.Screen Shot 2015-04-26 at 4.16.36 PM
  4. Select all of the content you wish to hide. It can include headings, images and other types of content.
  5. Click on the the  Create Div Container button again.
  6. Type hide-reveal to the pop-up form’s Stylesheet Classes field and click OK.Screen Shot 2015-04-26 at 4.24.07 PM

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:

hide-reveal without an extra return

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):

hide-reveal with an extra return

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.

Leave a Reply