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

Simple accordion with a 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.

Copied to clipboard

Fixed accordion 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.

Copied to clipboard

Props

Accordion Props

The Accordion component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion
aria-labelstring''Adds accessible text to the Accordion
anyAdditional props are spread to the container <dl>

AccordionContent Props

The AccordionContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodeContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion content
idstring''Identify the AccordionContent item
isHiddenboolfalseFlag to show if the expanded content of the Accordion item is visible
isFixedboolfalseFlag to indicate Accordion content is fixed
aria-labelstring''Adds accessible text to the Accordion content
anyAdditional props are spread to the container <dd>

AccordionItem Props

The AccordionItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the Accordion item
anyAdditional props are spread to the container

AccordionToggle Props

The AccordionToggle component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the Accordion Toggle
isExpandedboolfalseFlag to show if the expanded content of the Accordion item is visible
idstringIdentify the Accordion toggle number
anyAdditional props are spread to the container <dt>

CSS Variables

--pf-c-accordion--BackgroundColorc_accordion_BackgroundColor#fff
--pf-c-accordion--BorderWidthc_accordion_BorderWidth1px
--pf-c-accordion--BoxShadowc_accordion_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-accordion--PaddingBottomc_accordion_PaddingBottom2rem
--pf-c-accordion--PaddingTopc_accordion_PaddingTop2rem
--pf-c-accordion__expanded-content--BorderLeftColorc_accordion__expanded_content_BorderLeftColor#06c
--pf-c-accordion__expanded-content--Colorc_accordion__expanded_content_Color#72767b
--pf-c-accordion__expanded-content--FontSizec_accordion__expanded_content_FontSize0.875rem
--pf-c-accordion__expanded-content-body--PaddingBottomc_accordion__expanded_content_body_PaddingBottom0.5rem
--pf-c-accordion__expanded-content-body--PaddingLeftc_accordion__expanded_content_body_PaddingLeft2rem
--pf-c-accordion__expanded-content-body--PaddingRightc_accordion__expanded_content_body_PaddingRight2rem
--pf-c-accordion__expanded-content-body--PaddingTopc_accordion__expanded_content_body_PaddingTop0.5rem
--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_BorderWidth3px
--pf-c-accordion__expanded-content--m-fixed--MaxHeightc_accordion__expanded_content_m_fixed_MaxHeight9.375rem
--pf-c-accordion__toggle--BorderLeftColorc_accordion__toggle_BorderLeftColor#06c
--pf-c-accordion__toggle--PaddingBottomc_accordion__toggle_PaddingBottom0.5rem
--pf-c-accordion__toggle--PaddingLeftc_accordion__toggle_PaddingLeft2rem
--pf-c-accordion__toggle--PaddingRightc_accordion__toggle_PaddingRight2rem
--pf-c-accordion__toggle--PaddingTopc_accordion__toggle_PaddingTop0.5rem
--pf-c-accordion__toggle--active--BackgroundColorc_accordion__toggle_active_BackgroundColor#f5f5f5
--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_LineHeight1.5
--pf-c-accordion__toggle--m-expanded--BorderLeftColorc_accordion__toggle_m_expanded_BorderLeftColor#06c
--pf-c-accordion__toggle--m-expanded--BorderWidthc_accordion__toggle_m_expanded_BorderWidth3px
--pf-c-accordion__toggle-text--MaxWidthc_accordion__toggle_text_MaxWidthcalc(100% - 1.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_FontWeight500
--pf-c-accordion__toggle-text--expanded--Colorc_accordion__toggle_text_expanded_Color#004080
--pf-c-accordion__toggle-text--expanded--FontWeightc_accordion__toggle_text_expanded_FontWeight500
--pf-c-accordion__toggle-text--focus--Colorc_accordion__toggle_text_focus_Color#004080
--pf-c-accordion__toggle-text--focus--FontWeightc_accordion__toggle_text_focus_FontWeight500
--pf-c-accordion__toggle-text--hover--Colorc_accordion__toggle_text_hover_Color#004080
--pf-c-accordion__toggle-text--hover--FontWeightc_accordion__toggle_text_hover_FontWeight500