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;
Collapsible Props API
  • children
    node Required

    Specifies contents of the component.

  • className
    string

    Specifies class name to append to the base element.

  • defaultOpen
    bool

    Specifies whether the Collapsible should be initially open.

    Defaultfalse
  • iconWhenClosed
    element

    Specifies icon to show when Collapsible is closed.

    Default<Icon src={ExpandMore} />
  • iconWhenOpen
    element

    Specifies icon to show when Collapsible is open.

    Default<Icon src={ExpandLess} />
  • onClose
    func

    Callback fired when Collapsible closes.

  • onOpen
    func

    Callback fired when Collapsible opens.

  • onToggle
    func

    Callback fired when Collapsible's state is toggled.

  • open
    bool

    Specifies whether Collapsible is open.

  • styling
    enum'basic' | 'card' | 'card-lg'

    Specifies style variant.

    Default'card'
  • title
    node Required

    Specifies title.

CollapsibleAdvanced Props API
  • children
    node

    Specifies contents of the component.

  • className
    string

    Specifies classname to append to the base element.

  • defaultOpen
    bool

    Specifies whether Collapsible should be initially open.

    Defaultfalse
  • open
    bool

    Specifies whether Collapsible is open.

  • onToggle
    func

    Callback fired when Collapsible's state is toggled.

  • onOpen
    func

    Callback fired when Collapsible opens.

  • onClose
    func

    Callback fired when Collapsible closes.

CollapsibleBody Props API
  • children
    node

    Specifies contents of the component.

  • tag
    string

    Specifies content's base element.

    Default'div'
  • transitionWrapper
    element

    Specifies transition element.

CollapsibleTrigger Props API
  • children
    node

    Specifies contents of the component.

  • tag
    string | elementType

    Specifies base element.

    Default'div'
  • openOnly
    bool

    Specifies whether toggling Collapsible's state will always trigger only open action.

    Defaultfalse
  • closeOnly
    bool

    Specifies whether toggling Collapsible's state will always trigger only close action.

    Defaultfalse
  • onClick
    func

    Callback fired when element gets clicked.

  • onKeyDown
    func

    Callback fired when a key is pressed.

CollapsibleVisible Props API
  • children
    node

    Specifies contents of the component.

  • whenOpen
    bool

    Specifies whether the content should be visible when Collapsible is open.

    Defaultfalse
  • whenClosed
    bool

    Specifies whether the content should be visible when Collapsible is closed.

    Defaultfalse