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:

1. Drag a text component on to the page. Enter the text that will serve as
   the trigger.
2. In the CSS class field type toggle item1
3. Drag a second text component below the first. Enter the content that will be revealed when the user clicks the trigger.
4. 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:

1. Click the Preview button (magnifying glass icon) at the bottom of the Sidekick menu;
2. 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.