HTML

Accordion

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.

No box shadow

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<i>Initiates the toggle icon. 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-no-box-shadow.pf-c-accordionModifies the accordion to remove the box shadow.
.pf-m-expanded.pf-c-accordion__toggle, .pf-c-accordion__expanded-contentModifies the accordion button and expanded content for the expanded state.
.pf-m-hover.pf-c-accordion__toggleModifies the accordion button for the hover state.
.pf-m-active.pf-c-accordion__toggleModifies the accordion button for the active state.
.pf-m-focus.pf-c-accordion__toggleModifies the accordion button for the focus state.
.pf-m-fixed.pf-c-accordion__expanded-contentModifies the expanded content for the fixed state.

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