Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

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/elements

Then 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 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

Installation

npm install @patternfly/elements

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
View 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.

Default Slot

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

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 bordered style variant

DOM Property
bordered
Type
boolean
Default
false
large

Whether to apply the large style 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-global--BackgroundColor--100 #fff
--pf-c-accordion__toggle--PaddingTop

PaddingTop for the toggle

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-accordion__toggle--PaddingRight

PaddingRight for the toggle

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion__toggle--PaddingBottom

PaddingBottom for the toggle

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-accordion__toggle--PaddingLeft

PaddingLeft for the toggle

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion__toggle--before--BackgroundColor

BackgroundColor for the toggle before element

 transparent
--pf-c-accordion__toggle--before--Top

Top position for the toggle before element

 0
--pf-c-accordion__toggle--hover--BackgroundColor

BackgroundColor for the toggle on hover

 var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-c-accordion__toggle--focus--BackgroundColor

BackgroundColor for the toggle on focus

 var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-c-accordion__toggle--active--BackgroundColor

BackgroundColor for the toggle when active

 var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-global--BackgroundColor--200 #f0f0f0
--pf-c-accordion__toggle--before--Width

Width for the toggle before element

 var(--pf-global--BorderWidth--lg, 3px)
--pf-c-accordion__toggle--m-expanded--before--BackgroundColor

BackgroundColor for the toggle before element when expanded

 var(--pf-global--primary-color--100, #06c)
--pf-c-accordion__toggle-text--MaxWidth

MaxWidth for the toggle text

 calc(100% - var(--pf-global--spacer--lg, 1.5rem))
--pf-c-accordion__toggle--hover__toggle-text--Color

Color for the toggle text on hover

 var(--pf-global--link--Color, #06c)
--pf-c-accordion__toggle--active__toggle-text--Color

Color for the toggle text when active

 var(--pf-global--link--Color, #06c)
--pf-c-accordion__toggle--active__toggle-text--FontWeight

FontWeight for the toggle text when active

 var(--pf-global--FontWeight--semi-bold, 700)
--pf-c-accordion__toggle--focus__toggle-text--Color

Color for the toggle text on focus

 var(--pf-global--link--Color, #06c)
--pf-c-accordion__toggle--focus__toggle-text--FontWeight

FontWeight for the toggle text on focus

 var(--pf-global--FontWeight--semi-bold, 700)
--pf-c-accordion__toggle--m-expanded__toggle-text--Color

Color for the toggle text when expanded

 var(--pf-global--link--Color, #06c)
--pf-global--link--Color #06c
--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight

FontWeight for the toggle text when expanded

 var(--pf-global--FontWeight--semi-bold, 700)
--pf-global--FontWeight--semi-bold 700
--pf-c-accordion__toggle-icon--Transition

Transition for the toggle icon

 .2s ease-in 0s
--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate

Rotate value for the toggle icon when expanded

 90deg
--pf-c-accordion__expanded-content--Color

Color for the expanded content

 var(--pf-global--Color--200, #6a6e73)
--pf-global--Color--200 #6a6e73
--pf-c-accordion__expanded-content--FontSize

FontSize for the expanded content

 var(--pf-global--FontSize--sm, 0.875rem)
--pf-global--FontSize--sm 0.875rem
--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor

BackgroundColor for the expanded content body before element when expanded

 var(--pf-global--primary-color--100, #06c)
--pf-global--primary-color--100 #06c
--pf-c-accordion__expanded-content--m-fixed--MaxHeight

MaxHeight for the expanded content when fixed

 9.375rem
--pf-c-accordion__expanded-content-body--PaddingTop

PaddingTop for the expanded content body

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-accordion__expanded-content-body--PaddingRight

PaddingRight for the expanded content body

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion__expanded-content-body--PaddingBottom

PaddingBottom for the expanded content body

 var(--pf-global--spacer--sm, 0.5rem)
--pf-global--spacer--sm 0.5rem
--pf-c-accordion__expanded-content-body--PaddingLeft

PaddingLeft for the expanded content body

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop

PaddingTop for nested expanded content body

 0
--pf-c-accordion__expanded-content-body--before--BackgroundColor

BackgroundColor for the expanded content body before element

 transparent
--pf-c-accordion__expanded-content-body--before--Width

Width for the expanded content body before element

 var(--pf-global--BorderWidth--lg, 3px)
--pf-global--BorderWidth--lg 3px
--pf-c-accordion__expanded-content-body--before--Top

Top position for the expanded content body before element

 0
--pf-c-accordion--m-display-lg__toggle--PaddingTop

PaddingTop for the toggle in large display mode

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion--m-display-lg__toggle--PaddingRight

PaddingRight for the toggle in large display mode

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion--m-display-lg__toggle--PaddingBottom

PaddingBottom for the toggle in large display mode

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion--m-display-lg__toggle--PaddingLeft

PaddingLeft for the toggle in large display mode

 var(--pf-global--spacer--lg, 1.5rem)
--pf-c-accordion--m-display-lg__toggle--FontFamily

FontFamily for the toggle in large display mode

 var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)
--pf-global--FontFamily--heading--sans-serif "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif
--pf-c-accordion--m-display-lg__toggle--FontSize

FontSize for the toggle in large display mode

 var(--pf-global--FontSize--xl, 1.25rem)
--pf-global--FontSize--xl 1.25rem
--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color

Color for the toggle text on hover in large display mode

 var(--pf-global--Color--100, #151515)
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color

Color for the toggle text when active in large display mode

 var(--pf-global--Color--100, #151515)
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight

FontWeight for the toggle text when active in large display mode

 var(--pf-global--FontWeight--normal, 400)
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color

Color for the toggle text on focus in large display mode

 var(--pf-global--Color--100, #151515)
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight

FontWeight for the toggle text on focus in large display mode

 var(--pf-global--FontWeight--normal, 400)
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color

Color for the toggle text when expanded in large display mode

 var(--pf-global--Color--100, #151515)
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight

FontWeight for the toggle text when expanded in large display mode

 var(--pf-global--FontWeight--normal, 400)
--pf-global--FontWeight--normal 400
--pf-c-accordion--m-display-lg__expanded-content--FontSize

FontSize for the expanded content in large display mode

 var(--pf-global--FontSize--md, 1rem)
--pf-global--FontSize--md 1rem
--pf-c-accordion--m-display-lg__expanded-content--Color

Color for the expanded content in large display mode

 var(--pf-global--Color--100, #151515)
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop

PaddingTop for the expanded content body in large display mode

 0
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight

PaddingRight for the expanded content body in large display mode

 var(--pf-global--spacer--md, 1rem)
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom

PaddingBottom for the expanded content body in large display mode

 var(--pf-global--spacer--md, 1rem)
--pf-global--spacer--md 1rem
--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom

PaddingBottom for the last child of expanded content body in large display mode

 var(--pf-global--spacer--lg, 1.5rem)
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft

PaddingLeft for the expanded content body in large display mode

 var(--pf-global--spacer--lg, 1.5rem)
--pf-global--spacer--lg 1.5rem
--pf-c-accordion--m-bordered--BorderTopWidth

BorderTopWidth for the bordered variant

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-accordion--m-bordered--BorderTopColor

BorderTopColor for the bordered variant

 var(--pf-global--BorderColor--100, #d2d2d2)
--pf-c-accordion--m-bordered__toggle--before--Top

Top position for the toggle before element in bordered variant

 calc(-1 * var(--pf-global--BorderWidth--sm, 1px))
--pf-c-accordion--m-bordered__toggle--after--BorderColor

BorderColor for the toggle after element in bordered variant

 var(--pf-global--BorderColor--100, #d2d2d2)
--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth

BorderTopWidth for the toggle after element in bordered variant

 0
--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth

BorderBottomWidth for the toggle after element in bordered variant

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth

BorderBottomWidth for the last child after element in bordered expanded content

 var(--pf-global--BorderWidth--sm, 1px)
--pf-global--BorderWidth--sm 1px
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor

BorderBottomColor for the last child after element in bordered expanded content

 var(--pf-global--BorderColor--100, #d2d2d2)
--pf-global--BorderColor--100 #d2d2d2
--pf-global--Color--100 #151515
--pf-c-accordion--BackgroundColor

BackgroundColor for the accordion

 var(--pf-global--BackgroundColor--100, #fff)
--accordion__bordered--Color —

CSS Shadow Parts

None

© 2018-2025 Red Hat, Inc. Deploys by Netlify