Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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>

Card Style

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

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>

    </>

  );

}

Default Open

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>

With Callbacks

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>

Advanced Usage

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

Bare minimum

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>

Card style with advanced usage

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>

With a close button

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>

onOpen, onClose and onToggle callbacks

See the developer console for logging.

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>

Controlled usage

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>

  );

}

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 NameParagon VersionInstance Count
frontend-app-account20.36.04
frontend-app-admin-portal20.26.33
frontend-app-communications20.30.12
frontend-app-course-authoring20.32.01
frontend-app-gradebook19.25.44
frontend-app-learner-portal-enterprise20.36.04
frontend-app-learner-portal-programs20.28.41
frontend-app-learning20.28.41
frontend-app-ora-grading20.30.01
frontend-app-payment20.30.11
frontend-app-program-console20.32.02
frontend-app-publisher20.28.51
frontend-learner-portal-base12.2.01
prospectus20.32.312

CollapsibleAdvanced

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.32.01
frontend-app-discussions20.15.03
frontend-app-learner-portal-enterprise20.36.02
frontend-app-learning20.28.43
frontend-app-ora-grading20.30.01
frontend-app-publisher20.28.51
frontend-lib-content-components20.34.08
prospectus20.32.33

CollapsibleBody

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.32.01
frontend-app-discussions20.15.03
frontend-app-learner-portal-enterprise20.36.02
frontend-app-learning20.28.43
frontend-app-ora-grading20.30.01
frontend-lib-content-components20.34.07
prospectus20.32.33

CollapsibleTrigger

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.32.01
frontend-app-discussions20.15.03
frontend-app-learner-portal-enterprise20.36.02
frontend-app-learning20.28.43
frontend-app-ora-grading20.30.01
frontend-app-publisher20.28.51
frontend-lib-content-components20.34.03
prospectus20.32.31

CollapsibleVisible

Project NameParagon VersionInstance Count
frontend-app-course-authoring20.32.04
frontend-app-discussions20.15.06
frontend-app-learner-portal-enterprise20.36.04
frontend-app-learning20.28.46
frontend-app-ora-grading20.30.02
frontend-app-publisher20.28.52
frontend-lib-content-components20.34.04
prospectus20.32.36
Leave feedback

Contents

All components (A-Z)