Accordion

Examples

Definition list

: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
: Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.
: Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.
: 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.
: Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

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.

Bordered

: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
: Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.
: Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.
: 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.
: Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

Display size large

Toggle icon at start

: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
: Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.
: Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.
: 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.
: Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.

Props

Accordion

*required
Name	Type	Default	Description
aria-label	string		Adds accessible text to the Accordion
asDefinitionList	boolean	true	Flag to indicate whether use definition list or div
children	React.ReactNode	null	Content rendered inside the Accordion
className	string	''	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
isBordered	boolean	false	Flag to indicate the accordion had a border
isNoPlainOnGlass Beta	boolean	false	Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled.
isPlain Beta	boolean	false	Flag to add plain styling to the accordion.
togglePosition	'start' \| 'end'	'end'	Sets the toggle icon position for all accordion toggles.

AccordionItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the accordion item.
className	string		Additional classes added to the accordion item.
isExpanded	boolean	false	Flag to indicate whether the accordion item is expanded.

AccordionContent

*required
Name	Type	Default	Description
aria-label	string	''	Adds accessible text to the Accordion content
aria-labelledby	string		Id of the controlling accordion toggle to label the content.
children	React.ReactNode	null	Content rendered inside the Accordion
className	string	''	Additional classes added to the Accordion content
component	React.ElementType		Component to use as content container
contentBodyProps	AccordionExpandableContentBodyProps		Props passed to the AccordionExpandableContentBody *
id	string	''	Identify the AccordionContent item
isCustomContent	React.ReactNode	false	Flag indicating content is custom. Expanded content Body wrapper will be removed from children. This allows multiple bodies to be rendered as content.
isFixed	boolean	false	Flag to indicate Accordion content is fixed

AccordionToggle

*required
Name	Type	Default	Description
idrequired	string		Identify the Accordion toggle number
children	React.ReactNode	null	Content rendered inside the Accordion toggle
className	string	''	Additional classes added to the Accordion Toggle
component	React.ElementType		Container to override the default for toggle

AccordionExpandableContentBody

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the accordion content body

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-accordion	--pf-v6-c-accordion--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-accordion--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-accordion	--pf-v6-c-accordion--RowGap	0.25rem
--pf-v6-c-accordion--RowGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--BorderRadius	6px
--pf-v6-c-accordion__item--BorderRadius --pf-t--global--border--radius--200 6px
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--m-expanded--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-accordion__item--m-expanded--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--ColumnGap	0.5rem
--pf-v6-c-accordion__toggle--ColumnGap --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--PaddingBlockStart	0.5rem
--pf-v6-c-accordion__toggle--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--PaddingInlineEnd	1rem
--pf-v6-c-accordion__toggle--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--PaddingBlockEnd	0.5rem
--pf-v6-c-accordion__toggle--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd	0.5rem
--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--PaddingInlineStart	1rem
--pf-v6-c-accordion__toggle--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-accordion__toggle--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(255, 255, 255, 0.0000)
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--hover--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-accordion__toggle--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgba(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) rgba(199, 199, 199, 0.2500)
--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--BorderRadius	6px
--pf-v6-c-accordion__toggle--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--ZIndex	100
--pf-v6-c-accordion__toggle--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--BorderWidth	0px
--pf-v6-c-accordion__toggle--BorderWidth --pf-t--global--border--width--action--plain--default 0px
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-accordion__toggle--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--hover--BorderWidth	0px
--pf-v6-c-accordion__toggle--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap	0.5rem
--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle-text--Color	(In light theme) #151515
--pf-v6-c-accordion__toggle-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle-text--FontWeight	400
--pf-v6-c-accordion__toggle-text--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight	500
--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight	500
--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle-icon--TransitionDuration	100ms
--pf-v6-c-accordion__toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--default --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle-icon--Transition	transform 100ms cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-accordion__toggle-icon--Transition transform --pf-v6-c-accordion__toggle-icon--TransitionDuration --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction transform --pf-t--global--motion--duration--icon--default --pf-t--global--motion--timing-function--default transform --pf-t--global--motion--duration--sm --pf-t--global--timing-function--200 transform --pf-t--global--duration--100 cubic-bezier(.4, 0, .2, 1) 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__expandable-content--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 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__expandable-content--MarginInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-accordion__expandable-content--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--BorderRadius	6px
--pf-v6-c-accordion__expandable-content--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--Color	(In light theme) #151515
--pf-v6-c-accordion__expandable-content--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--FontSize	0.875rem
--pf-v6-c-accordion__expandable-content--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 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__item--m-expanded__expandable-content--Visibility	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__item--m-expanded__expandable-content--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade	200ms
--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade	100ms
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--before--TransitionDuration--fade	100ms
--pf-v6-c-accordion__item--before--TransitionDuration--fade --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--before--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-accordion__item--before--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 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__expandable-content--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 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__expandable-content--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--TransitionDuration--slide	0s
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide 0s
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--TransitionDuration--fade	100ms
--pf-v6-c-accordion__expandable-content--TransitionDuration--fade --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-accordion__expandable-content--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 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__expandable-content-body--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd	0.5rem
--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd	0.5rem
--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart	0.5rem
--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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--m-display-lg__toggle--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd	1rem
--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd	1rem
--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd	0.5rem
--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart	1rem
--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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--m-display-lg__toggle--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "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--m-display-lg__toggle--FontSize --pf-t--global--font--size--heading--sm --pf-t--global--font--size--lg --pf-t--global--font--size--400 1.125rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight	500
--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize	1rem
--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-accordion	--pf-v6-c-accordion--m-display-lg__expandable-content--Color	(In light theme) #151515
--pf-v6-c-accordion--m-display-lg__expandable-content--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #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__item--m-bordered--BorderBlockEndWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--BorderWidth	0
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--BorderColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-accordion__item--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--m-expanded--BorderWidth	0px
--pf-v6-c-accordion__item--m-expanded--BorderWidth --pf-t--global--border--width--high-contrast--regular 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) rgba(255, 255, 255, 0.0000)
--pf-v6-c-accordion__expandable-content--BorderColor --pf-t--global--border--color--high-contrast rgba(255, 255, 255, 0.0000)
	.pf-v6-c-accordion	--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth	0px
--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth --pf-t--global--border--width--high-contrast--regular 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) rgba(199, 199, 199, 0.2500)
--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor --pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(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__toggle--ColumnGap --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--PaddingBlockStart	1rem
--pf-v6-c-accordion__toggle--PaddingBlockStart --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--PaddingInlineEnd	1rem
--pf-v6-c-accordion__toggle--PaddingInlineEnd --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--PaddingBlockEnd	1rem
--pf-v6-c-accordion__toggle--PaddingBlockEnd --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd	0.5rem
--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--PaddingInlineStart	1rem
--pf-v6-c-accordion__toggle--PaddingInlineStart --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__toggle--FontFamily --pf-v6-c-accordion--m-display-lg__toggle--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "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__toggle--FontSize --pf-v6-c-accordion--m-display-lg__toggle--FontSize --pf-t--global--font--size--heading--sm --pf-t--global--font--size--lg --pf-t--global--font--size--400 1.125rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle-text--FontWeight	500
--pf-v6-c-accordion__toggle-text--FontWeight --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight	500
--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__expandable-content--FontSize	1rem
--pf-v6-c-accordion__expandable-content--FontSize --pf-v6-c-accordion--m-display-lg__expandable-content--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__expandable-content--Color	(In light theme) #151515
--pf-v6-c-accordion__expandable-content--Color --pf-v6-c-accordion--m-display-lg__expandable-content--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-accordion.pf-m-bordered	--pf-v6-c-accordion--RowGap	0
--pf-v6-c-accordion--RowGap --pf-v6-c-accordion--m-bordered--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__toggle--PaddingBlockEnd --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__toggle-text--FontWeight	500
--pf-v6-c-accordion__toggle-text--FontWeight --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__toggle-icon--Rotate	-180deg
--pf-v6-c-accordion__toggle-icon--Rotate --pf-v6-c-accordion__toggle--m-expanded__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--before--TransitionDuration--slide --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide undefined
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__item--before--TransitionDuration--fade	200ms
--pf-v6-c-accordion__item--before--TransitionDuration--fade --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__item--before--Opacity	1
--pf-v6-c-accordion__item--before--Opacity --pf-v6-c-accordion__item--m-expanded--before--Opacity 1
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__item--before--TranslateY	0
--pf-v6-c-accordion__item--before--TranslateY --pf-v6-c-accordion__item--m-expanded--before--TranslateY 0
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__item--BorderWidth	0px
--pf-v6-c-accordion__item--BorderWidth --pf-v6-c-accordion__item--m-expanded--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__toggle--BackgroundColor	transparent
--pf-v6-c-accordion__toggle--BackgroundColor --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor transparent
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--TransitionDuration--slide	0s
--pf-v6-c-accordion__expandable-content--TransitionDuration--slide --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--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__expandable-content--Opacity --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity 1
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--TranslateY	0
--pf-v6-c-accordion__expandable-content--TranslateY --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY 0
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--MarginBlockEnd	1rem
--pf-v6-c-accordion__expandable-content--MarginBlockEnd --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--MaxHeight	99999px
--pf-v6-c-accordion__expandable-content--MaxHeight --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight 99999px
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--Visibility	visible
--pf-v6-c-accordion__expandable-content--Visibility --pf-v6-c-accordion__item--m-expanded__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__expandable-content--m-fixed--MaxHeight--base --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight 9.375rem
	.pf-v6-c-accordion__item.pf-m-expanded	--pf-v6-c-accordion__expandable-content--BorderWidth	0px
--pf-v6-c-accordion__expandable-content--BorderWidth --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-accordion__toggle:is(:hover, :focus)	--pf-v6-c-accordion__toggle--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-accordion__toggle--BackgroundColor --pf-v6-c-accordion__toggle--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-accordion__toggle:is(:hover, :focus)	--pf-v6-c-accordion__toggle--BorderWidth	0px
--pf-v6-c-accordion__toggle--BorderWidth --pf-v6-c-accordion__toggle--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body	--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart	0
--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart 0

Edit this page on GitHub

Accordion

Examples

Definition list

Single expand behavior

Item one

Item two

Item three

Item four

Item five

Fixed with multiple expand behavior

Item one

Item two

Item three

Item four

Item five

Bordered

Toggle icon at start

Props

Accordion

AccordionItem

AccordionContent

AccordionToggle

AccordionExpandableContentBody

CSS variables