Collapsible
Collapsible is an element that allows a user to toggle (view/hide) supplemental information or actions.
When to use:
- To organize related information.
- To shorten pages and reduce scrolling when content is not crucial to read in full.
- When space is at a premium and long content cannot be displayed all at once.
Basic Usage
The styling prop at the top level <Collapsible /> component determines if the collapsible has basic styling, card, or card with heading.
Basic Style <Collapsible styling="basic" />
Card Style <Collapsible styling="card" />
This is the default style if no styling prop is supplied.
Large Card Style <Collapsible styling="card-lg" />
Card with custom icons <Collapsible styling="card-lg" />
Default Open
With Callbacks
Advanced Usage
For needs that deviate from the three styles above, use <Collapsible.Advanced />
Bare minimum
Card style with advanced usage
With a close button
onOpen, onClose and onToggle callbacks
See the developer console for logging.
Controlled usage
Imperative methods
If you need to open or close the Collapsible intermittently due to an event,
such as loading the page or clicking a link, you can open or close
an uncontrolled Collapsible by getting a ref to the component and calling
collapsibleRef.open() or collapsibleRef.close(). The internal state of
the component will be updated accordingly.
Theme Variables (SCSS)
// Collapsible$collapsible-card-spacer-y: .5rem !default;$collapsible-card-spacer-x: .5rem !default;$collapsible-card-spacer-y-lg: $card-spacer-y !default;$collapsible-card-spacer-x-lg: $card-spacer-x !default;$collapsible-card-body-spacer-left: .75rem !default;$collapsible-card-spacer-icon: 2.5rem !default;$collapsible-basic-spacer-y: .5rem !default;$collapsible-basic-spacer-x: .5rem !default;$collapsible-basic-spacer-icon: .625rem !default;
children
nodeRequiredSpecifies contents of the component.
className
stringSpecifies class name to append to the base element.
defaultOpen
boolDefaultfalseSpecifies whether the
Collapsibleshould be initially open.iconWhenClosed
elementDefault<Icon src={ExpandMore} />Specifies icon to show when
Collapsibleis closed.iconWhenOpen
elementDefault<Icon src={ExpandLess} />Specifies icon to show when
Collapsibleis open.onClose
funcCallback fired when
Collapsiblecloses.onOpen
funcCallback fired when
Collapsibleopens.onToggle
funcCallback fired when
Collapsible'sstate is toggled.open
boolSpecifies whether
Collapsibleis open.styling
enum'basic' | 'card' | 'card-lg'Default'card'Specifies style variant.
title
nodeRequiredSpecifies title.
children
nodeSpecifies contents of the component.
className
stringSpecifies classname to append to the base element.
defaultOpen
boolDefaultfalseSpecifies whether
Collapsibleshould be initially open.open
boolSpecifies whether
Collapsibleis open.onToggle
funcCallback fired when
Collapsible'sstate is toggled.onOpen
funcCallback fired when
Collapsibleopens.onClose
funcCallback fired when
Collapsiblecloses.
children
nodeSpecifies contents of the component.
tag
stringDefault'div'Specifies content's base element.
transitionWrapper
elementSpecifies transition element.
children
nodeSpecifies contents of the component.
tag
string|elementTypeDefault'div'Specifies base element.
openOnly
boolDefaultfalseSpecifies whether toggling
Collapsible'sstate will always trigger only open action.closeOnly
boolDefaultfalseSpecifies whether toggling
Collapsible'sstate will always trigger only close action.onClick
funcCallback fired when element gets clicked.
onKeyDown
funcCallback fired when a key is pressed.
children
nodeSpecifies contents of the component.
whenOpen
boolDefaultfalseSpecifies whether the content should be visible when
Collapsibleis open.whenClosed
boolDefaultfalseSpecifies whether the content should be visible when
Collapsibleis closed.