Skip to content
PatternFly

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.

Examples

Definition list

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Single expand behavior

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Fixed with multiple expand behavior

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Bordered

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Toggle icon at start

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Props

Accordion

*required
NameTypeDefaultDescription
aria-labelstringAdds accessible text to the Accordion
asDefinitionListbooleantrueFlag to indicate whether use definition list or div
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion
displaySize'default' | 'lg''default'Display size variant.
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h3'Heading level to use
isBorderedbooleanfalseFlag to indicate the accordion had a border
togglePosition'start' | 'end''end'Sets the toggle icon position for all accordion toggles.

AccordionItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion item

AccordionContent

*required
NameTypeDefaultDescription
aria-labelstring''Adds accessible text to the Accordion content
aria-labelledbystringId of the controlling accordion toggle to label the content.
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion content
componentReact.ElementTypeComponent to use as content container
idstring''Identify the AccordionContent item
isCustomContentReact.ReactNodefalseFlag indicating content is custom. Expanded content Body wrapper will be removed from children. This allows multiple bodies to be rendered as content.
isFixedbooleanfalseFlag to indicate Accordion content is fixed
isHiddenbooleanfalseFlag to show if the expanded content of the Accordion item is visible

AccordionToggle

*required
NameTypeDefaultDescription
idrequiredstringIdentify the Accordion toggle number
childrenReact.ReactNodenullContent rendered inside the Accordion toggle
classNamestring''Additional classes added to the Accordion Toggle
componentReact.ElementTypeContainer to override the default for toggle
isExpandedbooleanfalseFlag to show if the expanded content of the Accordion item is visible

AccordionExpandableContentBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the accordion content body

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-accordion--pf-v5-global--Color--100
#151515
.pf-v5-c-accordion--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-accordion--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-accordion--pf-v5-global--primary-color--100
#06c
.pf-v5-c-accordion--pf-v5-global--link--Color
#06c
.pf-v5-c-accordion--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-accordion--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-accordion--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-accordion--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--BackgroundColor
#fff
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--PaddingTop
0.5rem
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--PaddingRight
1rem
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--PaddingBottom
0.5rem
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--PaddingLeft
1rem
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--before--Top
0
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--after--Top
0
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--after--BackgroundColor
transparent
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--hover--BackgroundColor
#f0f0f0
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--focus--BackgroundColor
#f0f0f0
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--active--BackgroundColor
#f0f0f0
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--before--Width
3px
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--after--Width
3px
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--BackgroundColor
transparent
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--JustifyContent
space-between
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--ColumnGap
0
.pf-v5-c-accordion--pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent
start
.pf-v5-c-accordion--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap
1rem
.pf-v5-c-accordion--pf-v5-c-accordion__toggle-text--MaxWidth
calc(100% - 1.5rem)
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--hover__toggle-text--Color
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--active__toggle-text--Color
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight
700
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--focus__toggle-text--Color
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight
700
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight
700
.pf-v5-c-accordion--pf-v5-c-accordion__toggle-icon--Transition
.2s ease-in 0s
.pf-v5-c-accordion--pf-v5-c-accordion__toggle--m-expanded__toggle-icon--Rotate
90deg
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content--Color
#6a6e73
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content--FontSize
0.875rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor
#06c
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight
9.375rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--PaddingTop
0.5rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--PaddingRight
1rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--PaddingBottom
0.5rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--PaddingLeft
1rem
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--expandable-content-body--PaddingTop
0
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor
transparent
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--after--Width
3px
.pf-v5-c-accordion--pf-v5-c-accordion__expandable-content-body--before--Top
0
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft
1.5rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--FontSize
1.25rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight
400
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--Color
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight
400
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight
400
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content--FontSize
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content--Color
#151515
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingTop
0
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingRight
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingBottom
1rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom
1.5rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-display-lg__expandable-content-body--PaddingLeft
1.5rem
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered--BorderTopWidth
1px
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered--BorderTopColor
#d2d2d2
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__toggle--after--Top
calc(-1 * 1px)
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor
#d2d2d2
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth
0
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth
1px
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth
1px
.pf-v5-c-accordion--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor
#d2d2d2
.pf-v5-c-accordion.pf-m-toggle-start--pf-v5-c-accordion__toggle--JustifyContent
start
.pf-v5-c-accordion.pf-m-toggle-start--pf-v5-c-accordion__toggle--ColumnGap
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--PaddingTop
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--PaddingRight
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--PaddingBottom
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--PaddingLeft
1.5rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--FontSize
1.25rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--hover__toggle-text--Color
#151515
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--active__toggle-text--Color
#151515
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--active__toggle-text--FontWeight
400
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--focus__toggle-text--Color
#151515
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--focus__toggle-text--FontWeight
400
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--m-expanded__toggle-text--Color
#151515
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__toggle--m-expanded__toggle-text--FontWeight
400
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content-body--PaddingTop
0
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content-body--PaddingRight
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content-body--PaddingBottom
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content-body--PaddingLeft
1.5rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content--FontSize
1rem
.pf-v5-c-accordion.pf-m-display-lg--pf-v5-c-accordion__expandable-content--Color
#151515
.pf-v5-c-accordion.pf-m-display-lg .pf-v5-c-accordion__expandable-content-body:last-child--pf-v5-c-accordion__expandable-content-body--PaddingBottom
1.5rem
.pf-v5-c-accordion.pf-m-bordered--pf-v5-c-accordion__toggle--after--Top
calc(-1 * 1px)
.pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth
0
.pf-v5-c-accordion__toggle.pf-m-expanded--pf-v5-c-accordion__toggle--after--BackgroundColor
#06c
.pf-v5-c-accordion__expandable-content.pf-m-expanded--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor
#06c
.pf-v5-c-accordion__expandable-content-body + .pf-v5-c-accordion__expandable-content-body--pf-v5-c-accordion__expandable-content-body--PaddingTop
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines