This article explains how to set up the Content: Click to reveal element. You must have the Edit content permission to access the Content editor.
A Click to reveal element hides content until the user selects a button. It is often used to display answers, explanations or additional information while keeping the page uncluttered and interactive.
The element includes four configuration tabs:
Properties
Items
Settings
Completion actions
At the bottom of the element, you will find options to save your work:
Save/Update – save and continue editing
Save/Update and Exit – save and leave the item
Save/Update and View – save and preview the learner view
If you prefer not to save changes, you can select Back at the top of the editor.
Properties
The Properties tab includes general settings such as width, animation and visibility, affecting how the whole element appears on the page.
Items
Setting | Description |
Button text | The text shown on the button. |
Use IMG | Enable this option to display an image inside the button. |
Upload image | Select and upload an image. Choose Use this IMG to confirm. |
Img alt text | A concise description of the image for screen reader accessibility. |
Content | The text or media revealed when the user selects the button. |
Notes | Ensure images are cropped and optimised before uploading. |
Settings
Layout | Description |
Sequence | Shows one button at a time. Selecting a button reveals content and the next button. All layouts switch to Sequence on mobile. |
Popups | All buttons appear together. Content opens in a popup window. |
Reveal below | All buttons are shown and content appears underneath the buttons. |
Reveal on the side | All buttons are visible and content is displayed next to the buttons. |
Button width | Choose a % for button width. The Match to the widest button (text only) option helps maintain consistency across translations. |
Content width | Sets the width of revealed content or popup. In Reveal on the side, determines the content area vs button area. |
Popup action button text | Text on the popup's action button. (Shown only in Popups layout.) |
Popup action button position | Align the popup action button left, centre or right. (Popups layout only.) |
Content animation | Animation applied when content appears. |
Content animation speed | Controls animation speed. |
Button class name | Default class clickToRevealBtn. Do not change. |
Button class name - clicked | Default class for selected buttons. Do not change. |
Button text align | Align button text left, centre or right. |
Centered buttons | Aligns all buttons to the centre. |
Button shadow | Adds a shadow to the buttons (optional). |
Upload placeholder image | Image displayed before interaction in Reveal below and Reveal on the side layouts. |
Placeholder img alt text | Accessibility alt text for placeholder image. |
IMG class name | Default class for image styling. Do not change. |
IMG class name - selected | Default class for selected images. Do not change. |
Image border-radius (%) | Rounds image corners. Set 50% on a square image for a circular shape. |
Text position with image | Places the text above, below or on top of the image. |
Padding above button text (px) | Controls spacing between text and image. |
Padding below button text (px) | Controls spacing depending on text/image layout. |
Text colour | The colour of text when displayed on the image. |
Text background colour | Background behind the text when placed on an image. |
Text background opacity | Transparency level of the text background. |
Completion actions
These settings determine what happens after all Click to reveal buttons have been selected.
Setting | Description |
Next button action | Show or hide the next/continue button and optionally choose its destination. Requires identifiers. |
Show next delay | Delay the appearance of the next/continue button. (1000 = 1 second.) |
Add element | Display additional elements after completion. Requires identifiers. |
Remove element | Remove elements after completion. Requires identifiers. |
Animation | Animation for added elements. |
Delay | Animation delay for added elements. |
Set data variable | Writes a variable name to session data at completion. |
Set data value | Writes a data value paired with the variable above. |
Conclusion
If you have completed all module changes, please refer to the article titled What do I do when I finish creating or editing my module?
If you think you have incorrect permissions, please speak with your company admin or Customer Success Manager.
For further support, contact your Customer Success Manager by selecting Send us a message via the help icon on your portal, or by emailing [email protected].