This article explains how to set up the Content: Click to reveal element. Please note that you must have the Edit content permission to access the Content editor.
A Click to reveal is an interactive element that hides specific content, such as answers, explanations, or additional information until the user reveals it. This technique helps keep interfaces uncluttered and engages users with hands-on interactions.
The element configuration is split into four tabs:
Properties
Items
Settings
Completion actions
You will find three buttons at the bottom of the element to save your progress. If you wish not to save your changes, please select the Back button at the top of the element.
Save/Update
Save your changes and continue editing.
Save/Update and Exit
Save your changes and exit the element.
Save/Update and View
Save your changes and View as learner.
Properties
All content elements have a Properties tab. Here you will find general settings for the element, such as Block width, Animation and Visibility. These settings control the element as a whole in relation to other elements on the page, if any.
Items
An item consists of a button and the content that it reveals. You can choose the button to display text, an image or both text and image.
You can add, remove and change the order of items.
Button text | The text of the button. |
Use IMG | Enable if you wish to show an image in a button. |
Upload image | Select and upload an image. Preview and select the Use this IMG button to confirm. |
Img alt text | If you use an image, please enter the image description here for accessibility.
Alt text should be concise but descriptive, giving enough information without being overly wordy. It should also convey the image's purpose, not just a literal description of it. |
Content | The content to be revealed when the button is selected. |
NOTE: Please ensure to crop and optimise the images before uploading them to the element. Please see the Replacing an image article for more guidance.
Settings
The configuration settings of the in-element features.
Layout
There are four layouts to choose from.
1. Sequence
This is the default layout. All other layouts switch to the Sequence layout on mobile screens.
The activity begins with one button on the screen. When selected, it reveals its content and the following button below. The completed activity shows button one, content one, button two, content two, etc., in a single column, retaining the revealed content on the screen.
Select here to see an example
Select here to see an example
2. Popups
The activity begins showing all buttons at once and reveals content in popups.
Select here to see an example
Select here to see an example
3. Reveal below
The activity begins showing all buttons at once and reveals content below the buttons.
Select here to see an example
Select here to see an example
4. Reveal on the side
The activity begins showing all buttons at once and reveals content on the side of the buttons.
Select here to see an example
Select here to see an example
Other settings
Button width | Choose % how wide your buttons will be.
If you are using only text for your buttons, you can select Match to the widest button (text only) option. This option is useful when the course is translated, as the button width will be adaptive and, therefore, make the buttons cohesively wide in all languages. |
Content width | Set the width of the revealed content.
When using the Popups layout, this setting determines the width of the popup.
When using the Reveal on the side layout, this setting determines how much space is dedicated to content. The remaining width is for the buttons. For example, if the Content width is set to 60%, buttons will have 40% of the stage width. If you then set the Button width to 50%, the button size will be 20% of the stage width. |
Popup action button text | The text of the action button shown at the bottom of the popup. The action button closes the popup.
NOTE: The setting is shown only if the Popups layout is selected. |
Popup action button position | Choose the left, center or right position of the popup action button.
NOTE: The setting is shown only if the Popups layout is selected. |
Content animation | Entry animation of the revealed content. |
Content animation speed | The speed of the content entry animation. |
Button class name | The default class clickToRevealBtn is used for styling the button. Please leave it as it is. |
Button class name - clicked | The default class clickToRevealBtnClicked styles the button after it is selected. Please leave it as it is. |
Button text align | Align the button text to the left, center or right of the button. |
Centered buttons | Align the buttons to the centre of their dedicated space. |
Button shadow | You can choose to add shadows to the buttons. Leave it empty for no shadow. |
Upload placeholder image | When using the Reveal below and Reveal on the side layouts, you can show a placeholder image in place of to-be-revealed content.
The image is shown when the element loads for the first time and hidden when the user starts interacting with the buttons.
Select and upload an image. Preview and select the Use this IMG button to confirm. |
Placeholder img alt text | The image alt text describes the image to the screen reader users. |
IMG class name | The default class responsive is used for styling the button image. Please leave it as it is.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
IMG class name - selected | The default class responsiveSelected styles the button image after it is selected. Please leave it as it is.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
Image border-radius (%) | It rounds the corners of the image. To achieve a completely round image, upload a square image and select 50% here.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
Text position with image | Choose where the button text will appear in relation to the button image - above, below or on top of the image.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
Padding above button text (px) | The setting determines the size of the gap between the button text and the button image. When the "Text position with image" is set to below the image, the gap is above the text.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
Padding below button text (px) | The setting determines the size of the gap between the button text and the button image. When the "Text position with image" is set to above the image, the gap is below the text.
NOTE: The setting is shown only if the "Use IMG" toggle under the Items tab is enabled. |
Text colour | The colour of the text on the image.
NOTE: The setting is shown only if the "Text position with image" is set to On the image. |
Text background colour | The text background colour on the image.
NOTE: The setting is shown only if the "Text position with image" is set to On the image. |
Text background opacity | The text background colour opacity.
NOTE: The setting is shown only if the "Text position with image" is set to On the image. |
Completion actions
Set up what happens when all the click to reveal buttons have been selected.
Next button action | Show or hide the next/continue button. If the next/continue button should take the user to a certain page or section, select its identifier here.
NOTE: You must first assign an identifier to a page or a scrolling section. |
Show next delay | Set a delay for when the next/continue button should appear. To delay it for one second, enter 1000 here. |
Add element | To add more content to the page or section after the click to reveal is complete, select the required elements' identifiers here.
NOTE: You must first assign identifiers to elements. |
Remove element | To remove content from the page or section after the click to reveal is complete, select the required elements' identifiers here.
NOTE: You must first assign identifiers to elements. |
Animation | Entry animation for the added elements. |
Delay | Entry animation delay for the added elements. |
Set data variable | If a text value is put here, it will be written to the learner's session data when they complete the assessment. It must be used in conjunction with the "Set data value" field. |
Set data value | In conjunction with the "Set data variable" field, any value entered here (text or numerical) will be written to the learner's session data alongside the data variable. |
If you have completed all the module changes, please refer to the article titled What do I do when I finish creating or editing my module?.
NOTE: If you think you have the incorrect permissions, please contact your company admin or Customer success manager at [email protected].