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.

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

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

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Collapsible Props API

This component does not receive any props.

CollapsibleAdvanced Props API

children React.ReactNode
className string
defaultOpen boolean
open boolean
onToggle (isOpen: boolean) => void
onOpen () => void
onClose () => void
unmountOnExit boolean

CollapsibleBody Props API

children React.ReactNode
tag string
Default'div'
transitionWrapper React.ReactElement

CollapsibleTrigger Props API

children React.ReactNode
tag string | React.ElementType
Default'div'
openOnly boolean
Defaultfalse
closeOnly boolean
Defaultfalse
onClick (e: React.MouseEvent) => void
onKeyDown (e: React.KeyboardEvent) => void

CollapsibleVisible Props API

children React.ReactNode
whenOpen boolean
Defaultfalse
whenClosed boolean
Defaultfalse

Usage Insights#

Collapsible

Project Name	Paragon Version	Instance Count
frontend-app-account	22.10.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.10.0	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.10.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.10.0	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.10.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.10.0	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.10.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.10.0	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.10.0	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

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#

Props API#

Usage Insights#

Collapsible

CollapsibleAdvanced

CollapsibleBody

CollapsibleTrigger

CollapsibleVisible

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#

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