All Collections
Adding a Toggle Box
Adding a Toggle Box

Create a box that can expand or collapse when clicked or hovered over.

Kelvin H. avatar
Written by Kelvin H.
Updated over a week ago

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.

Setting up

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.

Open by default

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

Open action

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

Close by clicking outside

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.

Changing styles

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:

  1. The button rotates 180 degrees during opening or closing.

  2. The height of the content part changes from "auto" to "0" when closing.

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

Did this answer your question?