Skip to Content
Patternfly Logo

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.

ExamplesDocumentationCSS Variables

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

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

Definition list

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.

Documentation

Overview

There are two variations to build the accordion component: One way uses <div> and <h1 - h6> tags to build the component. In these examples .pf-c-accordion uses <div>, .pf-c-accordion__toggle uses <h3><button>, and .pf-c-accordion__expanded-content uses <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: In these examples .pf-c-accordion uses <dl>, .pf-c-accordion__toggle uses <dt><button>, and .pf-c-accordion__expanded-content uses <dd>.

Accessibility

AttributeApplied toOutcome
aria-expanded="false".pf-c-accordion__toggleIndicates that the expanded content element is hidden. Required
aria-expanded="true".pf-c-accordion__toggleIndicates that the expanded content element is visible. Required
hidden.pf-c-accordion__expanded-contentIndicates that the expanded content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true".pf-c-accordion__toggle-iconHides the icon from assistive technologies.Required

Usage

ClassApplied toOutcome
.pf-c-accordion<div>, <dl>Initiates an accordion component. Required
.pf-c-accordion__toggle<h1-h6><button>, <dt><button>Initiates a toggle in the accordion. Required
.pf-c-accordion__toggle-text<span>Initiates the text inside the toggle. Required
.pf-c-accordion__toggle-icon<span>Initiates the toggle icon wrapper. Required
.pf-c-accordion__expanded-content<div>, <dd>Initiates expanded content. Must be paired with a button
.pf-c-accordion__expanded-content-body<div>Initiates expanded content body. Required
.pf-m-expanded.pf-c-accordion__toggle, .pf-c-accordion__expanded-contentModifies the accordion button and expanded content for the expanded state.
.pf-m-fixed.pf-c-accordion__expanded-contentModifies the expanded content for the fixed state.

CSS Variables

.pf-c-accordion--pf-global--Color--100global_Color_100
#151515
.pf-c-accordion--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-accordion--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-accordion--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-accordion--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-accordion--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-accordion--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-accordion--pf-c-accordion--BackgroundColorc_accordion_BackgroundColor
#fff
.pf-c-accordion--pf-c-accordion__toggle--PaddingTopc_accordion__toggle_PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingRightc_accordion__toggle_PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingBottomc_accordion__toggle_PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingLeftc_accordion__toggle_PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__toggle--before--BackgroundColorc_accordion__toggle_before_BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__toggle--hover--BackgroundColorc_accordion__toggle_hover_BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--focus--BackgroundColorc_accordion__toggle_focus_BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--active--BackgroundColorc_accordion__toggle_active_BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--before--Widthc_accordion__toggle_before_Width
3px
.pf-c-accordion--pf-c-accordion__toggle--m-expanded--before--BackgroundColorc_accordion__toggle_m_expanded_before_BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__toggle-text--MaxWidthc_accordion__toggle_text_MaxWidth
calc(100% - 1.5rem)
.pf-c-accordion--pf-c-accordion__toggle--hover__toggle-text--Colorc_accordion__toggle_hover__toggle_text_Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--Colorc_accordion__toggle_active__toggle_text_Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--FontWeightc_accordion__toggle_active__toggle_text_FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--Colorc_accordion__toggle_focus__toggle_text_Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--FontWeightc_accordion__toggle_focus__toggle_text_FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--Colorc_accordion__toggle_m_expanded__toggle_text_Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeightc_accordion__toggle_m_expanded__toggle_text_FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle-icon--Transitionc_accordion__toggle_icon_Transition
.2s ease-in 0s
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotatec_accordion__toggle_m_expanded__toggle_icon_Rotate
90deg
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingTopc_accordion__expanded_content_body_PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingRightc_accordion__expanded_content_body_PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingBottomc_accordion__expanded_content_body_PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingLeftc_accordion__expanded_content_body_PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__expanded-content--Colorc_accordion__expanded_content_Color
#6a6e73
.pf-c-accordion--pf-c-accordion__expanded-content--FontSizec_accordion__expanded_content_FontSize
0.875rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--BackgroundColorc_accordion__expanded_content_body_before_BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--Widthc_accordion__expanded_content_body_before_Width
3px
.pf-c-accordion--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColorc_accordion__expanded_content_m_expanded__expanded_content_body_before_BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__expanded-content--m-fixed--MaxHeightc_accordion__expanded_content_m_fixed_MaxHeight
9.375rem
.pf-c-accordion__toggle.pf-m-expanded--pf-c-accordion__toggle--before--BackgroundColorc_accordion__toggle_before_BackgroundColor
#06c
.pf-c-accordion__expanded-content.pf-m-expanded--pf-c-accordion__expanded-content-body--before--BackgroundColorc_accordion__expanded_content_body_before_BackgroundColor
#06c