Skip to content
Versions 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

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)

CSS Shadow Parts

None

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