HTML

Accordion

ExamplesDocumentationCSS Variables

Examples

Accordion fluid example

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.

Copied to clipboard

Accordion fixed example

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.

Copied to clipboard

Documentation

Overview

Accessibility

Attribute Applied to Outcome
aria-expanded="false" .pf-c-accordion__toggle Indicates that the expanded content element is hidden. Required
aria-expanded="true" .pf-c-accordion__toggle Indicates that the expanded content element is visible. Required
hidden .pf-c-accordion__expanded-content Indicates that the expanded content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true" .pf-c-accordion__toggle-icon Hides the icon from assistive technologies.Required

Usage

Class Applied to Outcome
.pf-c-accordion <dl> Initiates an accordion component. Required
.pf-c-accordion__toggle <dt><h3><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 <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-content Modifies the accordion button and expanded content for the expanded state.
.pf-m-hover .pf-c-accordion__toggle Modifies the accordion button for the hover state.
.pf-m-active .pf-c-accordion__toggle Modifies the accordion button for the active state.
.pf-m-focus .pf-c-accordion__toggle Modifies the accordion button for the focus state.
.pf-m-fixed .pf-c-accordion__expanded-content Modifies the expanded content for the fixed state.

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