Components

Collapse

The Collapse component is used to put regions of content under a block that users can expand or collapse.

Import

import { Collapse } from '@outfitio/outkit';

Use the ariaExpanded prop on the button component to add an aria-expanded attribute, which conveys the expanded or collapsed state to screen reader users.
Use the ariaControls prop on the button component, and set its value to the id of the collapsible component

The collapse component can be used for information that is lower priority or users don’t need to see all the time
It should not be used to hide error messages or other critical information that requires immediate action.

This component doesn't have any custom props.

Name	Type	Description
isOpen	`boolean`	If `true`, the content will be visible
animateOpacity	`boolean`	If `true`, the opacity of the content will be animated
duration	`number`	The animation duration as it expands
startingHeight	`number`	The height you want the content in it's collapsed state. Set to `0` by default
endingHeight	`number`	The height you want the content in it's expanded state. Set to `auto` by default
onAnimationEnd	`func`	The function to be called when the collapse animation starts. It provides the `currentHeight` as an argument
onAnimationStart	`func`	The function to be called when the collapse animation ends. It provides the `currentHeight` as an argument