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

Fluid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fixed

Definition list

: This text is hidden
: This text is hidden
: This text is hidden
: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
: This text is hidden

Bordered

Large bordered

Toggle icon at start

Documentation

Overview

There are two variations to build the accordion component. The first is to use <div> and <h1 - h6> tags:

.pf-v6-c-accordion is placed on a <div>,
.pf-v6-c-accordion__toggle is placed on a <button> that is inside a <h1-h6>, and
.pf-v6-c-accordion__expandable-content is placed on a <div>.

The heading level that you use should fit within the rest of the headings outlined on your page.

Another variation is using the definition list:

.pf-v6-c-accordion is placed on a <dl>,
.pf-v6-c-accordion__toggle is placed on a <button> that is inside a <dt>, and
.pf-v6-c-accordion__expandable-content is placed on a <dd>.

Usage

Class	Applied to	Outcome
`.pf-v6-c-accordion`	`<div>`, `<dl>`	Initiates an accordion component. Required
`.pf-v6-c-accordion__item`	`<div>`	Initiates an accordion item component. Required
`.pf-v6-c-accordion__toggle`	`<h1-h6><button>`, `<dt><button>`	Initiates a toggle in the accordion. Required
`.pf-v6-c-accordion__toggle-text`	`<span>`	Initiates the text inside the toggle. Required
`.pf-v6-c-accordion__toggle-icon`	`<span>`	Initiates the toggle icon wrapper. Required
`.pf-v6-c-accordion__expandable-content`	`<div>`, `<dd>`	Initiates expandable content. Must be paired with a button
`.pf-v6-c-accordion__expandable-content-body`	`<div>`	Initiates expandable content body. Required
`.pf-m-bordered`	`.pf-v6-c-accordion`	Modifies the accordion to add borders between items.
`.pf-m-display-lg`	`.pf-v6-c-accordion`	Modifies the accordion for large display styling. This variation is for marketing/web use cases.
`.pf-m-toggle-start`	`.pf-v6-c-accordion`	Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text.
`.pf-m-expanded`	`.pf-v6-c-accordion__item`	Modifies the accordion item for the expanded state.
`.pf-m-fixed`	`.pf-v6-c-accordion__expandable-content`	Modifies the expandable content for the fixed state.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__item--BorderRadius	6px
--pf-v6-c-accordion__item--BorderRadius --pf-t--global--border--radius--200 6px
	:where(:root, .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)
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__toggle--ColumnGap	0.5rem
--pf-v6-c-accordion__toggle--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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)
	:where(:root, .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)
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap	1rem
--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight	700
--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 700
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__toggle-icon--Transition	.2s ease-in 0s
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate	90deg
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight	9.375rem
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart	0
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight	700
--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-accordion)	--pf-v6-c-accordion--m-bordered--RowGap	0
	:where(:root, .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
	:where(:root, .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	1rem
--pf-v6-c-accordion__toggle--ColumnGap --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.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	700
--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 700
	.pf-v6-c-accordion.pf-m-display-lg	--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight	700
--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 700
	.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

Fluid

Item one

Item two

Item three

Item four

Item five

Fixed

Item one

Item two

Item three

Item four

Item five

Definition list

Bordered

Item one

Item two

Item three

Item four

Item five

Large bordered

Item one

Item two

Item three

Item four

Item five

Toggle icon at start

Item one

Item two

Item three

Item four

Item five

Documentation

Overview

Usage

CSS variables