#Collapsibles
This package enables you to easily collapse and expand content of any kind, creating rich dropdown or accordion-like experiences. Each collapsible item can be remotely controlled, giving your markup ultimate flexibility. Collapsible items can also be grouped together, so that all close when one opens.
Some common uses for this package include:
#How it works
The <Collapsible> component does not render anything in the DOM, but controls the state of any nested <CollapsibleContent — an element whose height is animated from 0 to the auto-height using React Animate Height. This makes it possible to animate arbitrary content heights, a limitation of CSS alone.
To toggle the state of a collapsible there is a <CollapsibleToggler> component. This is a thin wrapper around the useCollapsible hook, firing the open method on click. This event propagates through the context to open or close the <CollapsibleContent>.
Accordions are created by wrapping multiple <Collapsible> components with a single <CollapsibleGroup>. Collapsibles that are rendered inside a group are partially controlled by that group. When allowMultiple is set to false on the group, all collapsibles will close except the open that was opened.
Transition times and curves are also easily customized using props. See the API for full details.
#Key features
- Remotely controlled
- Groupable
- Transitions
- ARIA accessible
- Typed