HTML

Accordion

ExamplesDocumentationCSS variables

Examples

Accordion fluid example

Copied to clipboard

Accordion fixed example

Copied to clipboard

Accordion definition list example

Copied to clipboard

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

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 <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-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#737679
--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-icon--Transitionc_accordion__toggle_icon_Transition.2s ease-in 0s
--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--m-expanded__toggle-icon--Transformc_accordion__toggle_m_expanded__toggle_icon_Transformrotate(90deg)
--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_FontWeight700
--pf-c-accordion__toggle-text--expanded--Colorc_accordion__toggle_text_expanded_Color#004080
--pf-c-accordion__toggle-text--expanded--FontWeightc_accordion__toggle_text_expanded_FontWeight700
--pf-c-accordion__toggle-text--focus--Colorc_accordion__toggle_text_focus_Color#004080
--pf-c-accordion__toggle-text--focus--FontWeightc_accordion__toggle_text_focus_FontWeight700
--pf-c-accordion__toggle-text--hover--Colorc_accordion__toggle_text_hover_Color#004080
--pf-c-accordion__toggle-text--hover--FontWeightc_accordion__toggle_text_hover_FontWeight700