The Collapsible component lets you expand or collapse content when needed.
Usage
A collapsible consitsts 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:
- Open the Insert Menu and go to Components.
- Click or drag the Collapsible component to your desired location.
Guides
Using a Collapsible for Additional Details
Already plenty content but See more or arrow card to show more
Sometimes, you might want to keep an interface clean by hiding extra details until needed. For example:
For example:
- A product description that reveals more specs when clicked.
- A comment section that stays hidden until a user wants to read or write a comment.
- A "Read More" button that expands an article preview into the full content.
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 where only the active section is expanded. To create a collapsible list:
- Select the CollapsibleContent within your Collapsible component.
- Place list items inside CollapsibleContent so they appear only when needed.
Animating Content
By default, the content appears instantly when toggled. To create a smooth opening effect:
- Apply CSS transitions to the CollapsibleContent.
- Use
overflow: hiddenandmax-heightto create a sliding effect.
- Adjust the transition speed in the Style Panel to control how fast it opens.
Properties
Collapsible
Property | Type | Default | Description |
defaultOpen | boolean | false | Determines if the content is open when the page loads. |
disabled | boolean | false | If true, prevents the user from interacting with the collapsible and all its items. |
onOpenChange | Action | - | Runs an action whenever the collapsible opens or closes. |
CollapsibleTrigger
Property | Type | Default | Description |
asChild | boolean | - | Changes the default trigger element with its child, while keeping the same properties and behavior. |
CollapsibleContent
Property | Type | Default | Description |
forceMount | boolean | false | Used to force the content to be mounted regardless of its open state. It can be useful when controlling animation with React animation libraries. |
Notes: The button is a link collapsible instead of a button