Accordion
An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-accordion/pf-accordion.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?
Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.
Call to actionAnim 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 actionInstallation
npm install @patternfly/elementsUsage
Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?
Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.
Call to actionAnim 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 actionView HTML Source
<pf-accordion>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-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>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>
Slots
Default slot in pf-accordion-header
We expect the light DOM of the pf-accordion-header to be a heading level tag
(h1, h2, h3, h4, h5, h6)
Default slot in pf-accordion-panel
Add the content for your accordion panel here.
-
Place -
Place the
pf-accordion-headerandpf-accordion-panelelements here. - Default Slot
Attributes
single-
When true, only one accordion panel may be expanded at a time
- DOM Property
single- Type
-
boolean - Default
-
false
bordered-
Whether to apply the
borderedstyle variant- DOM Property
bordered- Type
-
boolean - Default
-
false
large-
Whether to apply the
largestyle variant- DOM Property
large- Type
-
boolean - Default
-
false
fixed-
- DOM Property
fixed- Type
-
boolean - Default
-
false
expanded-index-
Sets and reflects the currently expanded accordion 0-based indexes. Use commas to separate multiple indexes.
<pf-accordion expanded-index="1,2"> ... </pf-accordion>- DOM Property
expandedIndex- Type
-
number[] - Default
-
unknown
Methods
firstUpdated()updateAccessibility()expand(index: number)-
Accepts a 0-based index value (integer) for the set of accordion items to expand. Accepts an optional parent accordion to search for headers and panels.
collapse(index: number)-
Accepts a 0-based index value (integer) for the set of accordion items to collapse.
toggle(index: number)-
Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
expandAll()-
Expands all accordion items.
collapseAll()-
Collapses all accordion items.
Events
expand-
when a panel expands
Event Type:AccordionExpandEvent collapse-
when a panel collapses
Event Type:AccordionCollapseEvent
Events on pf-accordion-header
change-
when the open panels change
Event Type:AccordionHeaderChangeEvent
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-accordion--BackgroundColor |
var(--pf-global--BackgroundColor--100, #fff)
|
|
--pf-c-accordion__toggle--PaddingTop |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-accordion__toggle--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion__toggle--PaddingBottom |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-accordion__toggle--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion__toggle--before--BackgroundColor |
transparent
|
|
--pf-c-accordion__toggle--before--Top |
0
|
|
--pf-c-accordion__toggle--hover--BackgroundColor |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
|
--pf-c-accordion__toggle--focus--BackgroundColor |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
|
--pf-c-accordion__toggle--active--BackgroundColor |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
|
--pf-c-accordion__toggle--before--Width |
var(--pf-global--BorderWidth--lg, 3px)
|
|
--pf-c-accordion__toggle--m-expanded--before--BackgroundColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-accordion__toggle-text--MaxWidth |
calc(100 - var(--pf-global--spacer--lg, 1.5rem))
|
|
--pf-c-accordion__toggle--hover__toggle-text--Color |
var(--pf-global--link--Color, #06c)
|
|
--pf-c-accordion__toggle--active__toggle-text--Color |
var(--pf-global--link--Color, #06c)
|
|
--pf-c-accordion__toggle--active__toggle-text--FontWeight |
var(--pf-global--FontWeight--semi-bold, 700)
|
|
--pf-c-accordion__toggle--focus__toggle-text--Color |
var(--pf-global--link--Color, #06c)
|
|
--pf-c-accordion__toggle--focus__toggle-text--FontWeight |
var(--pf-global--FontWeight--semi-bold, 700)
|
|
--pf-c-accordion__toggle--m-expanded__toggle-text--Color |
var(--pf-global--link--Color, #06c)
|
|
--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight |
var(--pf-global--FontWeight--semi-bold, 700)
|
|
--pf-c-accordion__toggle-icon--Transition |
.2s ease-in 0s
|
|
--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate |
90deg
|
|
--pf-c-accordion__expanded-content--Color |
var(--pf-global--Color--200, #6a6e73)
|
|
--pf-c-accordion__expanded-content--FontSize |
var(--pf-global--FontSize--sm, 0.875rem)
|
|
--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-accordion__expanded-content--m-fixed--MaxHeight |
9.375rem
|
|
--pf-c-accordion__expanded-content-body--PaddingTop |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-accordion__expanded-content-body--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion__expanded-content-body--PaddingBottom |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-accordion__expanded-content-body--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop |
0
|
|
--pf-c-accordion__expanded-content-body--before--BackgroundColor |
transparent
|
|
--pf-c-accordion__expanded-content-body--before--Width |
var(--pf-global--BorderWidth--lg, 3px)
|
|
--pf-c-accordion__expanded-content-body--before--Top |
0
|
|
--pf-c-accordion--m-display-lg__toggle--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__toggle--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__toggle--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__toggle--PaddingLeft |
var(--pf-global--spacer--lg, 1.5rem)
|
|
--pf-c-accordion--m-display-lg__toggle--FontFamily |
var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)
|
|
--pf-c-accordion--m-display-lg__toggle--FontSize |
var(--pf-global--FontSize--xl, 1.25rem)
|
|
--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight |
var(--pf-global--FontWeight--normal, 400)
|
|
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight |
var(--pf-global--FontWeight--normal, 400)
|
|
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight |
var(--pf-global--FontWeight--normal, 400)
|
|
--pf-c-accordion--m-display-lg__expanded-content--FontSize |
var(--pf-global--FontSize--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__expanded-content--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop |
0
|
|
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom |
var(--pf-global--spacer--lg, 1.5rem)
|
|
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft |
var(--pf-global--spacer--lg, 1.5rem)
|
|
--pf-c-accordion--m-bordered--BorderTopWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-accordion--m-bordered--BorderTopColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-c-accordion--m-bordered__toggle--before--Top |
calc(-1 * var(--pf-global--BorderWidth--sm, 1px))
|
|
--pf-c-accordion--m-bordered__toggle--after--BorderColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth |
0
|
|
--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-global--BackgroundColor--200 |
#f0f0f0
|
|
--pf-global--link--Color |
#06c
|
|
--pf-global--FontWeight--semi-bold |
700
|
|
--pf-global--Color--200 |
#6a6e73
|
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-global--primary-color--100 |
#06c
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-global--BorderWidth--lg |
3px
|
|
--pf-global--FontFamily--heading--sans-serif |
"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif
|
|
--pf-global--FontSize--xl |
1.25rem
|
|
--pf-global--FontWeight--normal |
400
|
|
--pf-global--FontSize--md |
1rem
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-c-accordion--BackgroundColor |
var(--pf-global--BackgroundColor--100, #fff)
|
|
--accordion__bordered--Color |
—
|
CSS Shadow Parts
None
