PatternFly Elements - Home PatternFly Elements

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.

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

Call to action

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

Ullamco ullamco sint 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.

Nostrud ad sit commodo nostrud?

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

Reprehenderit cupidatat labore?

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

Call to action

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.

This is a disclosure

Headline, sm

A Disclosure toggles the visibility of sections of content. It features one panel that consists of a caret icon and a section text label that collapses or expands to reveal more information.

Call-to-action

Installation

npm install @patternfly/pfe-accordion

Usage

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

Call to action

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

Ullamco ullamco sint 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.

Nostrud ad sit commodo nostrud?

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

Reprehenderit cupidatat labore?

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

Call to action
<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).

This is a disclosure

NEW

Headline, sm

A Disclosure toggles the visibility of sections of content. It features one panel that consists of a caret icon and a section text label that collapses or expands to reveal more information.

Call-to-action

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

Deprecated Events

pfe-accordion:expand

when a panel expands

Note: pfe-accordion:expand is deprecated.

Use expand

Event Type:
CustomEvent<{ toggle: PfeAccordionHeader, panel: PfeAccordionPanel }>
pfe-accordion:collapse

when a panel collapses

Note: pfe-accordion:collapse is deprecated.

Use collapse

Event Type:
CustomEvent<{ toggle: PfeAccordionHeader, panel: PfeAccordionPanel }>

Events on pfe-accordion-header

change

when the open panels change

Event Type:
AccordionHeaderChangeEvent

Deprecated Events on pfe-accordion-header

pfe-accordion:change

when the open panels change

detail: {
expanded: Boolean;
toggle: PfeAccordionHeader;
}

Note: pfe-accordion:change is deprecated.

Use change

Event Type:
CustomEvent<{ expanded: Boolean; toggle: PfeAccordionHeader }>

CSS Custom Properties

CSS Property Description Default
--pfe-accordion--Padding

Applied to header and panel components

var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5)

--pfe-accordion--BorderColor

Color of the encompassing borders

var(--pfe-theme--color--surface--border, #d2d2d2)

--pfe-accordion--BorderWidth

Width of the encompassing borders

var(--pfe-theme--surface--border-width, 1px)

--pfe-accordion--accent--width

Width of the accent mark

var(--pfe-theme--surface--border-width--active, 3px)

--pfe-accordion--Width

Maximum width for the accordion element

100%

--pfe-accordion--MaxWidth--content

Maximum width for the content inside the accordion panel

80ch

--pfe-accordion--BoxShadow

Box shadow on the header and panel in closed state

0 5px 4px transparent

--pfe-accordion--ZIndex

Accordion's z-index for the stack

3

--pfe-accordion--FontSize--header

Font-size for the accordion header text

var(--pf-global--FontSize--xl, 1.25rem)

--pfe-accordion--FontWeight--header

Font-weight for the accordion header text

var(--pfe-theme--font-weight--normal, 400)

--pfe-accordion--TextAlign

Text alignment for the accordion header text

left

--pfe-accordion--BackgroundColor

Background color for the accordion header and panel

transparent

--pfe-accordion--Color

Text color for the accordion header and panel

var(--pfe-broadcasted--text, #3c3f42)

--pfe-accordion--accent

Left accent line color for the accordion header and panel

transparent

--pfe-accordion--BackgroundColor--active

Background color when the accordion is active (hover, focus)

var(--pfe-theme--color--surface--lighter, #f0f0f0)

--pfe-accordion--Color--active

Text color when the accordion is active (hover, focus)

var(--pfe-broadcasted--text, #3c3f42)

--pfe-accordion--accent--active

Color of the accent mark when the accordion is active (hover, focus)

var(--pfe-theme--color--ui-accent, #06c)

--pfe-accordion--BackgroundColor--expanded

Background color when the accordion is open

var(--pfe-theme--color--surface--lightest, #fff)

--pfe-accordion--Color--expanded

Text color when the accordion is open

var(--pfe-broadcasted--text, #3c3f42)

--pfe-accordion--accent--expanded

Color of the accent mark when the accordion is open

var(--pfe-theme--color--ui-accent, #06c)

--pfe-accordion--BoxShadow--expanded

Box shadow when the accordion is open

0 5px 4px rgba(140, 140, 140, 0.35)

CSS Shadow Parts

None