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"
  title="Toggle Collapsible"
>
  <p>Your stuff goes here.</p>
</Collapsible>

<Collapsible
  styling="basic"
  title="Toggle Collapsible"
>
  <p>Your stuff goes here.</p>
</Collapsible>

Card Style

This is the default style if no styling prop is supplied.

() => {
  const [styling, setStyling] = useState('card');
  const [withIcon, setWithIcon] = useState(false);
  const iconProps = {
    iconWhenOpen: <span>CLOSE SESAME</span>,
    iconWhenClosed: <span>OPEN SESAME</span>,
  };
  
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: styling, setValue: setStyling, options: ['card', 'card-lg'], name: 'styling' },
          { value: withIcon, setValue: () => setWithIcon(!withIcon), name: 'with icon' },
        ]}
      />
      {/* end example form block */}
      <Collapsible
        styling={styling}
        title={<p><strong>Toggle Collapsible</strong></p>}
        {...withIcon ? iconProps : {}}
      >
        <p>Your stuff goes here.</p>
      </Collapsible>
    </>
  );
}

() => {
  const [styling, setStyling] = useState('card');
  const [withIcon, setWithIcon] = useState(false);
  const iconProps = {
    iconWhenOpen: <span>CLOSE SESAME</span>,
    iconWhenClosed: <span>OPEN SESAME</span>,
  };
  
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: styling, setValue: setStyling, options: ['card', 'card-lg'], name: 'styling' },
          { value: withIcon, setValue: () => setWithIcon(!withIcon), name: 'with icon' },
        ]}
      />
      {/* end example form block */}
      <Collapsible
        styling={styling}
        title={<p><strong>Toggle Collapsible</strong></p>}
        {...withIcon ? iconProps : {}}
      >
        <p>Your stuff goes here.</p>
      </Collapsible>
    </>
  );
}

Default Open

<Collapsible title="I'm not a heading" defaultOpen>
  <p>Your stuff goes here.</p>
</Collapsible>

<Collapsible title="I'm not a heading" defaultOpen>
  <p>Your stuff goes here.</p>
</Collapsible>

With Callbacks

<Collapsible
  title="Toggle Collapsible"
  defaultOpen
  onToggle={(isOpen) => console.log('Collapsible toggled and open is: ', isOpen)}
  onOpen={() => console.log('Collapsible opened.')}
  onClose={() => console.log('Collapsible closed.')}
>
  <p>See the console.</p>
</Collapsible>

<Collapsible
  title="Toggle Collapsible"
  defaultOpen
  onToggle={(isOpen) => console.log('Collapsible toggled and open is: ', isOpen)}
  onOpen={() => console.log('Collapsible opened.')}
  onClose={() => console.log('Collapsible closed.')}
>
  <p>See the console.</p>
</Collapsible>

Advanced Usage

For needs that deviate from the three styles above, use <Collapsible.Advanced />

Bare minimum

<Collapsible.Advanced>
  <Collapsible.Trigger>
    Toggle Collapsible
  </Collapsible.Trigger>
  <Collapsible.Body>
    <p>Your stuff goes here</p>
  </Collapsible.Body>
</Collapsible.Advanced>

<Collapsible.Advanced>
  <Collapsible.Trigger>
    Toggle Collapsible
  </Collapsible.Trigger>
  <Collapsible.Body>
    <p>Your stuff goes here</p>
  </Collapsible.Body>
</Collapsible.Advanced>

Card style with advanced usage

<Collapsible.Advanced className="collapsible-card">
  <Collapsible.Trigger className="collapsible-trigger d-flex">
    <span className="flex-grow-1">This is the title</span>
    <Collapsible.Visible whenClosed> + </Collapsible.Visible>
    <Collapsible.Visible whenOpen> - </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    The content
  </Collapsible.Body>
</Collapsible.Advanced>

<Collapsible.Advanced className="collapsible-card">
  <Collapsible.Trigger className="collapsible-trigger d-flex">
    <span className="flex-grow-1">This is the title</span>
    <Collapsible.Visible whenClosed> + </Collapsible.Visible>
    <Collapsible.Visible whenOpen> - </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    The content
  </Collapsible.Body>
</Collapsible.Advanced>

With a close button

<Collapsible.Advanced className="collapsible-card" defaultOpen>
  <Collapsible.Trigger className="collapsible-trigger d-flex">
    <span className="flex-grow-1">This is the title</span>
    <Collapsible.Visible whenClosed> + </Collapsible.Visible>
    <Collapsible.Visible whenOpen> - </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    <p>The content</p>

    <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
      Close
    </Collapsible.Trigger>
  </Collapsible.Body>
</Collapsible.Advanced>

<Collapsible.Advanced className="collapsible-card" defaultOpen>
  <Collapsible.Trigger className="collapsible-trigger d-flex">
    <span className="flex-grow-1">This is the title</span>
    <Collapsible.Visible whenClosed> + </Collapsible.Visible>
    <Collapsible.Visible whenOpen> - </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    <p>The content</p>

    <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
      Close
    </Collapsible.Trigger>
  </Collapsible.Body>
</Collapsible.Advanced>

onOpen, onClose and onToggle callbacks

See the developer console for logging.

<Collapsible.Advanced
  className="collapsible-card-lg"
  onToggle={(isOpen) => console.log('Collapsible toggled and open is: ', isOpen)}
  onOpen={() => console.log('Collapsible opened.')}
  onClose={() => console.log('Collapsible closed.')}
>
  <Collapsible.Trigger className="collapsible-trigger">
    <h4 className="flex-grow-1">I'm a heading</h4>

      <Collapsible.Visible whenClosed>
        +
      </Collapsible.Visible>

      <Collapsible.Visible whenOpen>
        -
      </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    <p>Your stuff goes here.</p>

    <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
      Close
    </Collapsible.Trigger>
  </Collapsible.Body>
</Collapsible.Advanced>

<Collapsible.Advanced
  className="collapsible-card-lg"
  onToggle={(isOpen) => console.log('Collapsible toggled and open is: ', isOpen)}
  onOpen={() => console.log('Collapsible opened.')}
  onClose={() => console.log('Collapsible closed.')}
>
  <Collapsible.Trigger className="collapsible-trigger">
    <h4 className="flex-grow-1">I'm a heading</h4>

      <Collapsible.Visible whenClosed>
        +
      </Collapsible.Visible>

      <Collapsible.Visible whenOpen>
        -
      </Collapsible.Visible>
  </Collapsible.Trigger>

  <Collapsible.Body className="collapsible-body">
    <p>Your stuff goes here.</p>

    <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
      Close
    </Collapsible.Trigger>
  </Collapsible.Body>
</Collapsible.Advanced>

Controlled usage

function() {
  const [collapseIsOpen, setCollapseOpen] = React.useState(true);

  return (
    <Collapsible.Advanced
      open={collapseIsOpen}
      onToggle={isOpen => setCollapseOpen(!isOpen)}
      className="collapsible-card"
    >
      <Collapsible.Trigger className="collapsible-trigger">
        <h4 className="flex-grow-1">I'm a heading</h4>

          <Collapsible.Visible whenClosed>
            +
          </Collapsible.Visible>

          <Collapsible.Visible whenOpen>
            -
          </Collapsible.Visible>
      </Collapsible.Trigger>

      <Collapsible.Body className="collapsible-body">
        <p>Your stuff goes here.</p>

        <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
          Close
        </Collapsible.Trigger>
      </Collapsible.Body>
    </Collapsible.Advanced>
  );
}

function() {
  const [collapseIsOpen, setCollapseOpen] = React.useState(true);

  return (
    <Collapsible.Advanced
      open={collapseIsOpen}
      onToggle={isOpen => setCollapseOpen(!isOpen)}
      className="collapsible-card"
    >
      <Collapsible.Trigger className="collapsible-trigger">
        <h4 className="flex-grow-1">I'm a heading</h4>

          <Collapsible.Visible whenClosed>
            +
          </Collapsible.Visible>

          <Collapsible.Visible whenOpen>
            -
          </Collapsible.Visible>
      </Collapsible.Trigger>

      <Collapsible.Body className="collapsible-body">
        <p>Your stuff goes here.</p>

        <Collapsible.Trigger closeOnly tag="a" className="btn btn-outline-primary">
          Close
        </Collapsible.Trigger>
      </Collapsible.Body>
    </Collapsible.Advanced>
  );
}

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-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.
unmountOnExit bool
Unmount the component (remove it from the DOM) when it is collapsed
Defaulttrue

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.
unmountOnExit bool
Unmount the component (remove it from the DOM) when it is collapsed.
Defaulttrue

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

Paragon Design System

Collapsible

Basic Usage

Basic Style

Card Style

Default Open

With Callbacks

Advanced Usage

Bare minimum

Card style with advanced usage

With a close button

onOpen, onClose and onToggle callbacks

Controlled usage

Imperative methods

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Collapsible

Basic Usage#

Basic Style#

Card Style#

Default Open#

With Callbacks#

Advanced Usage#

Bare minimum#

Card style with advanced usage#

With a close button#

onOpen, onClose and onToggle callbacks#

Controlled usage#

Imperative methods#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

Basic Style

Card Style

Default Open

With Callbacks

Advanced Usage

Bare minimum

Card style with advanced usage

With a close button

onOpen, onClose and onToggle callbacks

Controlled usage

Imperative methods