React

Accordion

Accordions are used to deliver a lot of content in a small space, allowing the user to expand and collapse the component to show or hide information. In the collapsed state, the user will see the most important details about a topic. They can click on the accordion to expand the content area and view additional details.

ExamplesPropsCSS Variables

Examples

Definition list

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

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.

Props

Accordion properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion
aria-labelstring''Adds accessible text to the Accordion
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h3'Heading level to use
asDefinitionListbooleantrueFlag to indicate whether use definition list or div
AccordionItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion item
AccordionContent properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion content
idstring''Identify the AccordionContent item
isHiddenbooleanfalseFlag to show if the expanded content of the Accordion item is visible
isFixedbooleanfalseFlag to indicate Accordion content is fixed
aria-labelstring''Adds accessible text to the Accordion content
componentReact.ElementTypeComponent to use as content container
AccordionToggle properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion toggle
classNamestring''Additional classes added to the Accordion Toggle
isExpandedbooleanfalseFlag to show if the expanded content of the Accordion item is visible
idstringIdentify the Accordion toggle number
componentReact.ElementTypeContainer to override the default for toggle

CSS Variables

--pf-c-accordion__expanded-content-body--PaddingBottomc_accordion__expanded_content_body_PaddingBottom
0.5rem
--pf-c-accordion__expanded-content-body--PaddingLeftc_accordion__expanded_content_body_PaddingLeft
2rem
--pf-c-accordion__expanded-content-body--PaddingRightc_accordion__expanded_content_body_PaddingRight
2rem
--pf-c-accordion__expanded-content-body--PaddingTopc_accordion__expanded_content_body_PaddingTop
0.5rem
--pf-c-accordion__expanded-content--BorderLeftColorc_accordion__expanded_content_BorderLeftColor
#06c
--pf-c-accordion__expanded-content--Colorc_accordion__expanded_content_Color
#737679
--pf-c-accordion__expanded-content--FontSizec_accordion__expanded_content_FontSize
0.875rem
--pf-c-accordion__expanded-content--m-expanded--BorderLeftColorc_accordion__expanded_content_m_expanded_BorderLeftColor
#06c
--pf-c-accordion__expanded-content--m-expanded--BorderWidthc_accordion__expanded_content_m_expanded_BorderWidth
3px
--pf-c-accordion__expanded-content--m-fixed--MaxHeightc_accordion__expanded_content_m_fixed_MaxHeight
9.375rem
--pf-c-accordion__toggle--active--BackgroundColorc_accordion__toggle_active_BackgroundColor
#f5f5f5
--pf-c-accordion__toggle--BorderLeftColorc_accordion__toggle_BorderLeftColor
#06c
--pf-c-accordion__toggle--focus--BackgroundColorc_accordion__toggle_focus_BackgroundColor
#f5f5f5
--pf-c-accordion__toggle--hover--BackgroundColorc_accordion__toggle_hover_BackgroundColor
#f5f5f5
--pf-c-accordion__toggle-icon--LineHeightc_accordion__toggle_icon_LineHeight
1.5
--pf-c-accordion__toggle-icon--Transitionc_accordion__toggle_icon_Transition
.2s ease-in 0s
--pf-c-accordion__toggle--m-expanded__toggle-icon--Transformc_accordion__toggle_m_expanded__toggle_icon_Transform
rotate(90deg)
--pf-c-accordion__toggle--m-expanded--BorderLeftColorc_accordion__toggle_m_expanded_BorderLeftColor
#06c
--pf-c-accordion__toggle--m-expanded--BorderWidthc_accordion__toggle_m_expanded_BorderWidth
3px
--pf-c-accordion__toggle--PaddingBottomc_accordion__toggle_PaddingBottom
0.5rem
--pf-c-accordion__toggle--PaddingLeftc_accordion__toggle_PaddingLeft
2rem
--pf-c-accordion__toggle--PaddingRightc_accordion__toggle_PaddingRight
2rem
--pf-c-accordion__toggle--PaddingTopc_accordion__toggle_PaddingTop
0.5rem
--pf-c-accordion__toggle-text--active--Colorc_accordion__toggle_text_active_Color
#004080
--pf-c-accordion__toggle-text--active--FontWeightc_accordion__toggle_text_active_FontWeight
700
--pf-c-accordion__toggle-text--expanded--Colorc_accordion__toggle_text_expanded_Color
#004080
--pf-c-accordion__toggle-text--expanded--FontWeightc_accordion__toggle_text_expanded_FontWeight
700
--pf-c-accordion__toggle-text--focus--Colorc_accordion__toggle_text_focus_Color
#004080
--pf-c-accordion__toggle-text--focus--FontWeightc_accordion__toggle_text_focus_FontWeight
700
--pf-c-accordion__toggle-text--hover--Colorc_accordion__toggle_text_hover_Color
#004080
--pf-c-accordion__toggle-text--hover--FontWeightc_accordion__toggle_text_hover_FontWeight
700
--pf-c-accordion__toggle-text--MaxWidthc_accordion__toggle_text_MaxWidth
calc(100% - 1.5rem)
--pf-c-accordion--BackgroundColorc_accordion_BackgroundColor
#fff
--pf-c-accordion--BorderWidthc_accordion_BorderWidth
1px
--pf-c-accordion--BoxShadowc_accordion_BoxShadow
none
--pf-c-accordion--PaddingBottomc_accordion_PaddingBottom
2rem
--pf-c-accordion--PaddingTopc_accordion_PaddingTop
2rem