Accordion

An accordion is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-accordion--pf-v6-c-accordion--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-accordion--pf-v6-c-accordion--RowGap
0.25rem
.pf-v6-c-accordion--pf-v6-c-accordion__item--BorderRadius
6px
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--ColumnGap
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--PaddingBlockStart
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--PaddingInlineEnd
1rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--PaddingInlineStart
1rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor
transparent
.pf-v6-c-accordion--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--BorderRadius
6px
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--ZIndex
100
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--BorderWidth
0px
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--hover--BorderWidth
0px
.pf-v6-c-accordion--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-text--Color
(In light theme) #151515
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-text--FontWeight
400
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight
600
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight
600
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-icon--TransitionDuration
100ms
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-icon--Transition
transform 100ms cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-accordion--pf-v6-c-accordion__toggle-icon--Rotate
0
.pf-v6-c-accordion--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate
-180deg
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--MarginInlineEnd
1rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--MarginBlockEnd
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--MarginInlineStart
1rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--BorderRadius
6px
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--Color
(In light theme) #151515
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--FontSize
0.875rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight
9.375rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--MaxHeight
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--Visibility
hidden
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--Overflow
hidden
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility
visible
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow
visible
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight
99999px
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd
1rem
.pf-v6-c-accordion--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade
200ms
.pf-v6-c-accordion--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade
100ms
.pf-v6-c-accordion--pf-v6-c-accordion__item--before--TransitionDuration--fade
100ms
.pf-v6-c-accordion--pf-v6-c-accordion__item--before--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-accordion--pf-v6-c-accordion__item--before--Opacity
0
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded--before--Opacity
1
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded--before--TranslateY
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide
0s
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade
100ms
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide
0s
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade
200ms
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--slide
0s
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionDuration--fade
100ms
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--Opacity
0
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity
1
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--TranslateY
0
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart
0
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart
1rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd
1rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd
1rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart
1rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--FontFamily
"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle--FontSize
1.125rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight
600
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize
1rem
.pf-v6-c-accordion--pf-v6-c-accordion--m-display-lg__expandable-content--Color
(In light theme) #151515
.pf-v6-c-accordion--pf-v6-c-accordion--m-bordered--RowGap
0
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth
1px
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor
(In light theme) #e0e0e0
.pf-v6-c-accordion--pf-v6-c-accordion__item--BorderWidth
0
.pf-v6-c-accordion--pf-v6-c-accordion__item--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded--BorderWidth
0px
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--BorderWidth
0
.pf-v6-c-accordion--pf-v6-c-accordion__expandable-content--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-accordion--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth
0px
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain--pf-v6-c-accordion--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain--pf-v6-c-accordion__expandable-content--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain--pf-v6-c-accordion__item--m-expanded--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-accordion.pf-m-toggle-start--pf-v6-c-accordion__toggle--ColumnGap
0.5rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--PaddingBlockStart
1rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--PaddingInlineEnd
1rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--PaddingBlockEnd
1rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--PaddingInlineStart
1rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--FontFamily
"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--FontSize
1.125rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle-text--FontWeight
600
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight
600
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__expandable-content--FontSize
1rem
.pf-v6-c-accordion.pf-m-display-lg--pf-v6-c-accordion__expandable-content--Color
(In light theme) #151515
.pf-v6-c-accordion.pf-m-bordered--pf-v6-c-accordion--RowGap
0
.pf-v6-c-accordion.pf-m-bordered--pf-v6-c-accordion__item--BorderRadius
0
.pf-v6-c-accordion.pf-m-bordered--pf-v6-c-accordion__toggle--BorderRadius
0
.pf-v6-c-accordion.pf-m-bordered--pf-v6-c-accordion__item--BorderWidth
0
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__toggle--PaddingBlockEnd
0.5rem
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__toggle-text--FontWeight
600
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__toggle-icon--Rotate
-180deg
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__item--before--TransitionDuration--slide
undefined
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__item--before--TransitionDuration--fade
200ms
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__item--before--Opacity
1
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__item--before--TranslateY
0
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__item--BorderWidth
0px
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__toggle--BackgroundColor
transparent
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--TransitionDuration--slide
0s
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--TransitionDuration--fade
0s
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--Opacity
1
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--TranslateY
0
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--MarginBlockEnd
1rem
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--MaxHeight
99999px
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--Visibility
visible
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base
9.375rem
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--BorderWidth
0px
.pf-v6-c-accordion__item.pf-m-expanded--pf-v6-c-accordion__expandable-content--Overflow
visible
.pf-v6-c-accordion__toggle:is(:hover, :focus)--pf-v6-c-accordion__toggle--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-accordion__toggle:is(:hover, :focus)--pf-v6-c-accordion__toggle--BorderWidth
0px
.pf-v6-c-accordion__expandable-content.pf-m-fixed--pf-v6-c-accordion__expandable-content--Overflow
auto
.pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart
0