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
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__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--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--Transition	.2s ease-in 0s
	.pf-v6-c-accordion	--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate	90deg
	.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	1rem
--pf-v6-c-accordion__expandable-content--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.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	9.375rem
	.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-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__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__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__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

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