Collapse

Overview

Collapse is used to hide and show content.

Installation

npm install @patternfly/pfe-collapse

Usage

pfe-collapse automatically wires up the toggle and panel so when the pfe-collapse-toggle is toggled, it will either open or close the pfe-collapse-panel.

<pfe-collapse>
  <pfe-collapse-toggle>
    This is the toggle
  </pfe-collapse-toggle>
  <pfe-collapse-panel>
    This is the panel
  </pfe-collapse-panel>
</pfe-collapse>

Collapse with a preset ID

<pfe-collapse>
  <pfe-collapse-toggle aria-controls="panel1">
    <h3>Collapse Toggle with preset ID</h3>
  </pfe-collapse-toggle>
  <pfe-collapse-panel id="panel1">
    <p>Panel content</p>
  </pfe-collapse-panel>
</pfe-collapse>

Standalone toggle and panel (not wrapped in a pfe-collapse)

The toggle needs an aria-controls attribute that links to the id of the panel.

<pfe-collapse-toggle aria-controls="panel">
  Toggle the Standalone Panel
</pfe-collapse-toggle>
<p>Other content:</p>
<pfe-collapse-panel id="panel">
  <p>Panel content</p>
</pfe-collapse-panel>

Standalone panel

A standalone panel can be opened by any action or event that toggles the expanded property on the panel.

<button>Toggle Panel</button>

<pfe-collapse-panel id="standalone-panel">
  <p>Panel content</p>
</pfe-collapse-panel>

<script>
  var collapse = document.querySelector("#standalone-panel");

  document.querySelector("button").addEventListener("click", function() {
    collapse.expanded = !collapse.expanded;
  });
</script>

Slots

Default Slot

Place the pfe-collapse-toggle and pfe-collapse-panel elements here.

Slots on pfe-collapse-toggle

Default Slot

Add the toggle content here.

Slots on pfe-collapse-panel

Default Slot

Add the collapse panel content here.

Attributes

animation

Can turn the animation of the panel expanding and collapsing either on or off. Animation of the panel defaults to true. Adding animation to the pfe-collapse tag will copy the animation attribute to the pfe-collapse-panel.

<pfe-collasible animation="false">
  ...
</pfe-collapse>

DOM Property

animation

Type

'true'|'false' | undefined

Default

unknown

Events on pfe-collapse-toggle

change

Fired when pfe-collapse-toggle is either expanded or collapsed.

Event Type:

CollapseChangeEvent

Events on pfe-collapse-panel

animation-start

Fired when pfe-collapse-panel begins animating the expansion or collapse of the panel.

Event Type:

AnimationStartEvent

animation-end

Fired when pfe-collapse-panel ends animating the expansion or collapse of the panel.

Event Type:

AnimationEndEvent

DOM Properties

Methods

toggle()

CSS Custom Properties

CSS Shadow Parts

None