Collapsible
Collapse and expand sections of content
Source ↗️ Report Issue ↗️Use the Collapsible
component to manage large sets of content in a compact and organized way. Use for showing information partially, or hiding content entirely behind a toggle.
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
To collapse other component or content, wrap it inside the Collapsible
component. To create the toggle buttons, you can use the on
and off
slots in Astro and Svelte. For React components, use the on
and off
prop.
No Animation
By default, Collapsible
components are not animated. To create toggleable content without animation, simply remove the maxHeight
prop that enables the animation:
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
Toggle States
Toggle states can also be configured with the toggled
and initialHeight
props:
toggled
: Makes the collapsible content toggled by default.initialHeight
: Set the height of the visible content in the off state. Use to create partial visibility.
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
You can also set the initialHeight
and maxHeight
properties globally via the following CSS variables if the heights of your component are constant:
Custom Layout
If you need to customize the layout of the Collapsible
component, you can attach additional CSS using the className
and togglesClassName
props. For example, we can add the following CSS to display the button above the collapsible content:
This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.
API
Prop | Purpose |
---|---|
initialHeight | Sets the initial height for the collapsible for the off state. Defaults to 0. |
maxHeight | Sets the max-height CSS property on the collapsible for the on state, making it animated. |
toggled | Sets whether the element is toggled by default. Defaults to false . |
className | Pass additional CSS classes for the collapsible. |
togglesClassName | Pass additional CSS classes for the container of the toggle buttons. |
React Prop | Purpose |
---|---|
on | Sets the element for the toggle on button. |
off | Sets the element for the toggle off button. |
Request improvement for this page