The Collapsible component lets you expand or collapse content when needed.

Anatomy

A Collapsible consists of the following parts:

• CollapsibleTrigger: The button that toggles the collapsible.

• CollapsibleContent: The component that contains the collapsible content.

Adding a Collapsible

To add a Collapsible to your page, follow these steps:

1. Insert the Collapsible component from the Library.

2. Update the default text in the Collapsible to clearly indicate its function.

3. Modify the content within the CollapsibleContent as needed.

Guides

Using a Collapsible for Additional Details

Sometimes, you might want to keep an interface clean by hiding extra details until needed. To set up an expandable content section:

1. Add and select the Collapsible component.

2. Edit the CollapsibleTrigger text to fit your content.

3. Add, edit, or remove any text inside the CollapsibleContent as needed.

Creating an Expandable List

If you’re working with a list of items, a Collapsible can help make it more interactive. A common example is a navigation menu with a collapsible section where additional nav items only appear when needed.

To create a collapsible list:

1. Select the CollapsibleContent inside the Collapsible component.

2. Place your list items (e.g., DropdownMenuItem) inside the CollapsibleContent so they are only visible when expanded.

Animating the Trigger Icon

You can animate the icon inside a CollapsibleTrigger to visually indicate when the section is expanded or collapsed.

To animate the trigger icon:

1. Select the trigger icon and go to the Properties Panel.

2. In the Classes input, add the "animated-icon" class and the "rotate" subclass.

3. Click on the open state to view its applied styles.

4. Scroll to the Effects section and find the Transform panel.

5. Click on Rotate and adjust the Z value (default is 180deg).

Properties

Collapsible

CollapsibleTrigger

CollapsibleContent