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

Show editable code example

Any Paragon component or export may be added to the code example.

<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.

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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.

Show editable code example

Any Paragon component or export may be added to the code example.

<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

Show editable code example

Any Paragon component or export may be added to the code example.

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;

Props API#

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

Usage Insights#

Collapsible

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.0	4
frontend-app-admin-portal	21.13.1	11
frontend-app-communications	22.7.0	2
frontend-app-course-authoring	22.8.1	4
frontend-app-gradebook	22.8.1	4
frontend-app-learner-portal-enterprise	21.13.1	4
frontend-app-learner-portal-programs	21.13.1	1
frontend-app-learning	22.8.1	2
frontend-app-ora-grading	21.11.3	1
frontend-app-payment	22.9.0	1
frontend-app-program-console	21.13.1	2
frontend-app-publisher	21.13.1	1
frontend-component-header-edx	21.13.1	1
frontend-component-header	22.10.0	1
frontend-learner-portal-base	12.2.0	1
prospectus	20.46.2	24

CollapsibleAdvanced

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.0	1
frontend-app-course-authoring	22.8.1	13
frontend-app-discussions	22.7.0	3
frontend-app-learner-portal-enterprise	21.13.1	2
frontend-app-learning	22.8.1	3
frontend-app-ora-grading	21.11.3	1
frontend-app-publisher	21.13.1	1
prospectus	20.46.2	4

CollapsibleBody

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.0	1
frontend-app-course-authoring	22.8.1	11
frontend-app-discussions	22.7.0	3
frontend-app-learner-portal-enterprise	21.13.1	2
frontend-app-learning	22.8.1	3
frontend-app-ora-grading	21.11.3	1
prospectus	20.46.2	4

CollapsibleTrigger

Project Name	Paragon Version	Instance Count
frontend-app-account	22.9.0	1
frontend-app-course-authoring	22.8.1	8
frontend-app-discussions	22.7.0	3
frontend-app-learner-portal-enterprise	21.13.1	2
frontend-app-learning	22.8.1	3
frontend-app-ora-grading	21.11.3	1
frontend-app-publisher	21.13.1	1
prospectus	20.46.2	2

CollapsibleVisible

Project Name	Paragon Version	Instance Count
frontend-app-course-authoring	22.8.1	12
frontend-app-discussions	22.7.0	6
frontend-app-learner-portal-enterprise	21.13.1	4
frontend-app-learning	22.8.1	6
frontend-app-ora-grading	21.11.3	2
frontend-app-publisher	21.13.1	2
prospectus	20.46.2	8

Edit this page Leave feedback

Paragon Design System

Theme

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)#

Props API#

Usage Insights#

Collapsible

CollapsibleAdvanced

CollapsibleBody

CollapsibleTrigger

CollapsibleVisible

All components (A-Z)

Theme

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)#

Props API#

Usage Insights#

Collapsible

CollapsibleAdvanced

CollapsibleBody

CollapsibleTrigger

CollapsibleVisible

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