CollapseGroup
A group of disclosures.
Pass several Collapse elements; joined connects their appearance. With name the group works as an accordion: only one item stays open, and the other one closes with animation.
Live example
One
Two
Three
Four
Five
Example controls
Usage
import { Collapse, CollapseGroup } from '@prosazhin/pbcomponents';
<CollapseGroup name='sections'>
{['One', 'Two', 'Three', 'Four', 'Five'].map((item) => (
<Collapse
key={item}
summary={item}
>{`Content for ${item}`}</Collapse>
))}
</CollapseGroup>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | Collapse[] | Expandable sections in the group. | — |
joined | boolean | Joins sections into one block. | false |
name | string | With name only one item stays open (accordion); the other one closes with animation. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.