Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)