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

: 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

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' \| 'large'	'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

AccordionItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the Accordion item

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
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
isHidden	boolean	false	Flag to show if the expanded content of the Accordion item is visible

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
isExpanded	boolean	false	Flag to show if the expanded content of the Accordion item is visible

AccordionExpandedContentBody

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

CSS variables


	.pf-c-accordion	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-accordion	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-accordion	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-accordion	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-accordion	--pf-c-accordion--BackgroundColor	#fff
--pf-c-accordion--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-accordion	--pf-c-accordion__toggle--PaddingTop	0.5rem
--pf-c-accordion__toggle--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-accordion	--pf-c-accordion__toggle--PaddingRight	1rem
--pf-c-accordion__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion__toggle--PaddingBottom	0.5rem
--pf-c-accordion__toggle--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-accordion	--pf-c-accordion__toggle--PaddingLeft	1rem
--pf-c-accordion__toggle--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion__toggle--before--BackgroundColor	transparent
	.pf-c-accordion	--pf-c-accordion__toggle--before--Top	0
	.pf-c-accordion	--pf-c-accordion__toggle--hover--BackgroundColor	#f0f0f0
--pf-c-accordion__toggle--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-accordion	--pf-c-accordion__toggle--focus--BackgroundColor	#f0f0f0
--pf-c-accordion__toggle--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-accordion	--pf-c-accordion__toggle--active--BackgroundColor	#f0f0f0
--pf-c-accordion__toggle--active--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-accordion	--pf-c-accordion__toggle--before--Width	3px
--pf-c-accordion__toggle--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-accordion	--pf-c-accordion__toggle--m-expanded--before--BackgroundColor	#06c
--pf-c-accordion__toggle--m-expanded--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__toggle-text--MaxWidth	calc(100% - 1.5rem)
--pf-c-accordion__toggle-text--MaxWidth calc(100% - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--lg) calc(100% - pf-size-prem(24px)) calc(100% - 1.5rem)
	.pf-c-accordion	--pf-c-accordion__toggle--hover__toggle-text--Color	#06c
--pf-c-accordion__toggle--hover__toggle-text--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__toggle--active__toggle-text--Color	#06c
--pf-c-accordion__toggle--active__toggle-text--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__toggle--active__toggle-text--FontWeight	700
--pf-c-accordion__toggle--active__toggle-text--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-accordion	--pf-c-accordion__toggle--focus__toggle-text--Color	#06c
--pf-c-accordion__toggle--focus__toggle-text--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__toggle--focus__toggle-text--FontWeight	700
--pf-c-accordion__toggle--focus__toggle-text--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-accordion	--pf-c-accordion__toggle--m-expanded__toggle-text--Color	#06c
--pf-c-accordion__toggle--m-expanded__toggle-text--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight	700
--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-accordion	--pf-c-accordion__toggle-icon--Transition	.2s ease-in 0s
	.pf-c-accordion	--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate	90deg
	.pf-c-accordion	--pf-c-accordion__expanded-content--Color	#6a6e73
--pf-c-accordion__expanded-content--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-accordion	--pf-c-accordion__expanded-content--FontSize	0.875rem
--pf-c-accordion__expanded-content--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-accordion	--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor	#06c
--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion	--pf-c-accordion__expanded-content--m-fixed--MaxHeight	9.375rem
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--PaddingTop	0.5rem
--pf-c-accordion__expanded-content-body--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--PaddingRight	1rem
--pf-c-accordion__expanded-content-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--PaddingBottom	0.5rem
--pf-c-accordion__expanded-content-body--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--PaddingLeft	1rem
--pf-c-accordion__expanded-content-body--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop	0
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--before--BackgroundColor	transparent
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--before--Width	3px
--pf-c-accordion__expanded-content-body--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-accordion	--pf-c-accordion__expanded-content-body--before--Top	0
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--PaddingTop	1rem
--pf-c-accordion--m-display-lg__toggle--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--PaddingRight	1rem
--pf-c-accordion--m-display-lg__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--PaddingBottom	1rem
--pf-c-accordion--m-display-lg__toggle--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--PaddingLeft	1.5rem
--pf-c-accordion--m-display-lg__toggle--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--FontFamily	'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
--pf-c-accordion--m-display-lg__toggle--FontFamily --pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--heading--sans-serif '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--FontSize	1.25rem
--pf-c-accordion--m-display-lg__toggle--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color	#151515
--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color	#151515
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight	400
--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color	#151515
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight	400
--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color	#151515
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight	400
--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content--FontSize	1rem
--pf-c-accordion--m-display-lg__expanded-content--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content--Color	#151515
--pf-c-accordion--m-display-lg__expanded-content--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop	0
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight	1rem
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom	1rem
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom	1.5rem
--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion	--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft	1.5rem
--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion	--pf-c-accordion--m-bordered--BorderTopWidth	1px
--pf-c-accordion--m-bordered--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-accordion	--pf-c-accordion--m-bordered--BorderTopColor	#d2d2d2
--pf-c-accordion--m-bordered--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-accordion	--pf-c-accordion--m-bordered__toggle--before--Top	calc(-1 * 1px)
--pf-c-accordion--m-bordered__toggle--before--Top calc(-1 * --pf-global--BorderWidth--sm) calc(-1 * $pf-global--BorderWidth--sm) calc(-1 * 1px)
	.pf-c-accordion	--pf-c-accordion--m-bordered__toggle--after--BorderColor	#d2d2d2
--pf-c-accordion--m-bordered__toggle--after--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-accordion	--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth	0
	.pf-c-accordion	--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth	1px
--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-accordion	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth	1px
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-accordion	--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor	#d2d2d2
--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--PaddingTop	1rem
--pf-c-accordion__toggle--PaddingTop --pf-c-accordion--m-display-lg__toggle--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--PaddingRight	1rem
--pf-c-accordion__toggle--PaddingRight --pf-c-accordion--m-display-lg__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--PaddingBottom	1rem
--pf-c-accordion__toggle--PaddingBottom --pf-c-accordion--m-display-lg__toggle--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--PaddingLeft	1.5rem
--pf-c-accordion__toggle--PaddingLeft --pf-c-accordion--m-display-lg__toggle--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--FontFamily	'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
--pf-c-accordion__toggle--FontFamily --pf-c-accordion--m-display-lg__toggle--FontFamily --pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--heading--sans-serif '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--FontSize	1.25rem
--pf-c-accordion__toggle--FontSize --pf-c-accordion--m-display-lg__toggle--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--hover__toggle-text--Color	#151515
--pf-c-accordion__toggle--hover__toggle-text--Color --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--active__toggle-text--Color	#151515
--pf-c-accordion__toggle--active__toggle-text--Color --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--active__toggle-text--FontWeight	400
--pf-c-accordion__toggle--active__toggle-text--FontWeight --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--focus__toggle-text--Color	#151515
--pf-c-accordion__toggle--focus__toggle-text--Color --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--focus__toggle-text--FontWeight	400
--pf-c-accordion__toggle--focus__toggle-text--FontWeight --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--m-expanded__toggle-text--Color	#151515
--pf-c-accordion__toggle--m-expanded__toggle-text--Color --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight	400
--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content-body--PaddingTop	0
--pf-c-accordion__expanded-content-body--PaddingTop --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop 0
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content-body--PaddingRight	1rem
--pf-c-accordion__expanded-content-body--PaddingRight --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content-body--PaddingBottom	1rem
--pf-c-accordion__expanded-content-body--PaddingBottom --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content-body--PaddingLeft	1.5rem
--pf-c-accordion__expanded-content-body--PaddingLeft --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content--FontSize	1rem
--pf-c-accordion__expanded-content--FontSize --pf-c-accordion--m-display-lg__expanded-content--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-accordion.pf-m-display-lg	--pf-c-accordion__expanded-content--Color	#151515
--pf-c-accordion__expanded-content--Color --pf-c-accordion--m-display-lg__expanded-content--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child	--pf-c-accordion__expanded-content-body--PaddingBottom	1.5rem
--pf-c-accordion__expanded-content-body--PaddingBottom --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-accordion.pf-m-bordered	--pf-c-accordion__toggle--before--Top	calc(-1 * 1px)
--pf-c-accordion__toggle--before--Top --pf-c-accordion--m-bordered__toggle--before--Top calc(-1 * --pf-global--BorderWidth--sm) calc(-1 * $pf-global--BorderWidth--sm) calc(-1 * 1px)
	.pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded	--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth	0
	.pf-c-accordion__toggle.pf-m-expanded	--pf-c-accordion__toggle--before--BackgroundColor	#06c
--pf-c-accordion__toggle--before--BackgroundColor --pf-c-accordion__toggle--m-expanded--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion__expanded-content.pf-m-expanded	--pf-c-accordion__expanded-content-body--before--BackgroundColor	#06c
--pf-c-accordion__expanded-content-body--before--BackgroundColor --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body	--pf-c-accordion__expanded-content-body--PaddingTop	0
--pf-c-accordion__expanded-content-body--PaddingTop --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop 0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

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

Props

Accordion

AccordionItem

AccordionContent

AccordionToggle

AccordionExpandedContentBody

CSS variables