What is a toggle box?
A toggle box is a part that opens and closes content. You can use toggle boxes to create accordions or dropdown menus.
Structure of a toggle box
A toggle box (shown in the yellow dotted area) contains two parts: a button (top red box) and content (bottom red box).
Add a toggle box
In the Add panel on the left side of the design editor, open the Box menu and click the Toggle box, or drag and drop it onto the page.
In the navigation, click the Add icon
.
In the Add panel, click the [Basic] tab.
Under [Interaction], click the [Toggle] button or drag it onto the screen to place it.
Configure toggle settings
In the toggle box settings, you can choose the open/close action (click or hover), set the default state (open or closed), and more.
Select the toggle box you added to the screen.
In the right panel, select the [Toggle] tab.
If the panel is closed, open the right panel.
Choose the open action
Choose one of the following triggers for opening and closing the toggle:
Click
Hover
Tip: Direction the toggle box opens and closes
The open/close direction depends on the alignment of the parent box that contains the toggle box. If the parent box is set to [Top], the toggle opens downward. If it's set to [Center], it opens both upward and downward.
Set the default display state
Choose whether the content part is shown open or closed by default. When [Show by default] is checked, the toggle starts in the open state.
Close when clicking outside
This setting is available when the open/close action is set to [Click]. When checked, the content part also closes when you click anywhere outside the button part.
Change styles
Double-click the toggle box to view the parts contained inside it.
Select the element you want to edit, then use the [Text] or [Box] tab in the right panel to set styles such as text and color. If the right panel is closed, open it.
Toggle animation settings (default)
Some boxes inside a toggle box have the conditional style "Close" applied by default.
Icon box: Rotates 180 degrees when opening or closing
Content part: Height changes from "auto" to "0" when closing
Edit the toggle animation
The conditional style "Close" sets the style for when the content part is closed. The difference between the default style and the [Close] style creates the animation when opening and closing.
How to set an animation on a toggle box
Double-click the toggle box [Toggle<div>], or select it and press the Enter key. Once the contents of the toggle are shown in the open state, you can set the animation.
Example: Adjust the open/close speed
Select the content part.
In the right panel, go to the [Transform] tab > [Animation] > and edit the [Time] value.
Example: Adjust only the closing speed
Double-click the toggle box [Toggle<div>], or select it and press the Enter key to switch to toggle editing mode.
Select the content part.
Select the conditional style [Close].
In the right panel, go to the [Transform] tab > [Animation] > and edit the [Time] value.
If you've edited a published site, please update the site. Your changes won't appear on the live site until you update it.
For more about the conditional style "Close" and animations, see these help articles:
dropdown toggle button