The Toggle box has two components: a button (shown with a red border below) and a content part (shown with a red dotted line below). When a visitor clicks or hovers over the button, the content part opens or closes accordingly.

You can make use of the Toggle box to create accordions or dropdown menus.

In the add panel on the left side of the design editor, click or drag the Toggle box from the box menu to place it on the page.

Double-click the placed box to enter the editing mode for the button and the content part.

You can also access detailed settings for the Toggle Box by selecting it and then opening the "Settings panel" on the right side of the editor.

You can choose whether the content part should be initially opened or closed. If enabled, the open state will be the initial state.

You can select either "Click" or "Hover" as the trigger for opening or closing.

This setting is available when you have selected “Click” as the open trigger. When you turn it on, the content part will close if you click anywhere other than the button.

You can edit styles by double-clicking the Toggle box to enter the editing mode or by selecting elements from the layers panel.

The Toggle Box offers the ability to define a conditional style for its "Closed" state. This allows you to create captivating animations for opening and closing by specifying style differences between the normal state and the "Closed" state.

For example, if you want to modify the speed of the opening and closing animation, you can edit the time and easing options in the Motion tab.

Note that the following conditional style is set by default for the “Closed” state:

For more information about conditional styles and animations, refer to the following articles: