AEM started using SFU Groups for access management on Wednesday, December 11.
If you lost access, please reach out to your site owner.
Hiding/Showing Content with a Toggle
What's a toggle?
Toggles allow you to hide content from the user when the page is first launched. By clicking the toggle trigger, the content below it is revealed. Clicking the trigger again causes the content to collapse or hide once again:
This is the toggle trigger
This is the content that will remain hidden until the user clicks the toggle trigger, above.
How to build a toggle
A toggle link is comprised of two parts — a trigger and the hidden content. The trigger is a line of text that suggests what content will be revealed when it is clicked. To build a toggle with a link trigger, you will need two text components with matching class designations in the form 'item1', 'item2', etc. While the trigger can appear anywhere on the page, for this example we'll assume that the content will appear directly below the trigger link:
- Drag a text component on to the page. Enter the text that will serve as
the trigger. - In the CSS class field type
toggle item1 - Drag a second text component below the first. Enter the content that will be revealed when the user clicks the trigger.
- In the CSS class field type
toggleContent item1
For multiple triggers, repeat steps 1-4 but increment the item number each time — e.g., item2 / item2, item3 / item3. In order for the trigger to behave properly, it is necessary for the item identifiers to match.
Previewing a toggle
Previewing a toggle is a two-step process:
- Click the Preview button (magnifying glass icon) at the bottom of the Sidekick menu;
- Click your browser's refresh or reload button.
You will be able to view the toggles after refreshing your browser.
Setting the toggle to be open by default
If you would like the contents of a toggle to be visible (open) by default, simply add the class "open" to the CSS class field of both the toggle and toggleContent components.
This is the toggle trigger
This component has the "open" class applied to it. It will remain visible to the user when the page is first open. The user can click the trigger to collapse the content.
In CLF4, if your collapsed content is spread across different components, only the Column Control component needs to contain the toggleContent class.
Anchors can be added to toggle triggers or open toggle content. Anchors added to closed toggle content will not work.