Skip to Content
Sponsor

Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Usage#

Basic Usage#

Editable Example

Changing the startingHeight#

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Editable Example

Props#

This component doesn't have any custom props.

NameTypeDescription
isOpenbooleanIf true, the content will be visible
animateOpacitybooleanIf true, the opacity of the content will be animated
durationnumberThe animation duration as it expands
startingHeightnumberThe height you want the content in it's collapsed state. Set to 0 by default
endingHeightnumberThe height you want the content in it's expanded state. Set to auto by default
onAnimationEndfuncThe function to be called when the collapse animation starts. It provides the currentHeight as an argument
onAnimationStartfuncThe function to be called when the collapse animation ends. It provides the currentHeight as an argument
Edit this page