Collapsible

expand or collapse animation

Props

direction

Direction to animate the collapsible content.

string
"horizontal"
"vertical"

open

Whether or not the component should be open.

boolean
true
false

React/DOM Properties

At its core, the Collapsible component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

collapsible.minSpeed

The minimum speed of Collapsible animation in milliseconds.

number
200

collapsible.baseline

Default height to be used to calculate the optimal collapsible speed.

number
500

collapsible.extend

Any additional style for Collapsible.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}