Accordion

Overview

Accordions toggle the visibility of sections of content. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

Disclosure variation

Accordions need to have at least two section panels. If only one panel is needed, a Disclosure is presented instead. Accordions are used to organize more important information whereas a disclosure is used to store supplementary content that might not be a crucial part of the user experience.

Installation

npm install @patternfly/pfe-accordion

Usage

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
    <pfe-cta>
      <a href="#">Call to action</a>
    </pfe-cta>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Nostrud ad sit commodo nostrud?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Reprehenderit cupidatat labore?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
    <pfe-cta>
      <a href="#">Call to action</a>
    </pfe-cta>
  </pfe-accordion-panel>
</pfe-accordion>

Slots

Accents slot in pfe-accordion

These elements will appear inline with the accordion header, between the header and the chevron (or after the chevron and header in disclosure mode).

Default slot in pfe-accordion-header

We expect the light DOM of the pfe-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)

Default slot in pfe-accordion-panel

Add the content for your accordion panel here.

Default Slot

Place the pfe-accordion-header and pfe-accordion-panel elements here.

Attributes

context

Changes the context of the accordion to one of 3 possible themes:

• light (default)
• dark
• saturated

This will override any context being passed from a parent component and will add a style attribute setting the --theme variable.

DOM Property

context

Type

'light'|'dark'|'saturated'

Default

unknown

color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See Color for default values

DOM Property

colorPalette

Type

ColorPalette | undefined

Default

unknown

on

Sets color theme based on parent context

DOM Property

on

Type

ColorTheme

Default

'light'

disclosure

If the element has one pfe-accordion-header, it will get tagged with disclosure="true". This applies a slightly different set of styles: chevron appears on the left side, the header has a single border on all four sides. Applying disclosure="false" to an element containing only one header/panel pairing will set the element to display as a standard accordion.

DOM Property

disclosure

Type

'true'|'false' | undefined

Default

unknown

history

Updates window.history and the URL to create sharable links. With the history attribute, the accordion must have an id.

The URL pattern will be ?{id-of-tabs}={index-of-expanded-items}. In the example below, selecting "Accordion 2" will update the URL as follows: ?lorem-ipsum=2. The index value for the expanded items starts at 1.

<pfe-accordion history id="lorem-ipsum">
  <pfe-accordion-header>
    <h3>Accordion 1</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 1 panel content.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Accordion 2</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 2 panel content.</p>
  </pfe-accordion-panel>
</pfe-accordion>

To expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.

DOM Property

history

Type

boolean

Default

false

expanded-index

Sets and reflects the currently expanded accordion indexes. Use commas to separate multiple indexes. The index value for the expanded items starts at 1.

<pfe-accordion expanded-index="2,3">
  ...
</pfe-accordion>

DOM Property

expandedIndex

Type

number[]

Default

[]

Methods

updateAccessibility()

toggle(index: number)

Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.

expand(index: number)

Accepts a 0-based index value (integer) for the set of accordion items to expand.

expandAll()

Expands all accordion items.

collapse(index: number)

Accepts a 0-based index value (integer) for the set of accordion items to collapse.

collapseAll()

Collapses all accordion items.

Events

expand

when a panel expands

Event Type:

AccordionExpandEvent

collapse

when a panel collapses

Event Type:

AccordionCollapseEvent

Events on pfe-accordion-header

change

when the open panels change

Event Type:

AccordionHeaderChangeEvent

CSS Custom Properties

CSS Shadow Parts

None