Patternfly Logo

Accordion

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--100
#151515
.pf-c-accordion--pf-global--Color--200
#6a6e73
.pf-c-accordion--pf-global--BorderColor--100
#d2d2d2
.pf-c-accordion--pf-global--primary-color--100
#06c
.pf-c-accordion--pf-global--link--Color
#06c
.pf-c-accordion--pf-global--link--Color--hover
#004080
.pf-c-accordion--pf-global--BackgroundColor--100
#fff
.pf-c-accordion--pf-c-accordion--BackgroundColor
#fff
.pf-c-accordion--pf-c-accordion__toggle--PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__toggle--before--BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__toggle--hover--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--focus--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--active--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--before--Width
3px
.pf-c-accordion--pf-c-accordion__toggle--m-expanded--before--BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__toggle-text--MaxWidth
calc(100% - 1.5rem)
.pf-c-accordion--pf-c-accordion__toggle--hover__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle-icon--Transition
.2s ease-in 0s
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate
90deg
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__expanded-content--Color
#6a6e73
.pf-c-accordion--pf-c-accordion__expanded-content--FontSize
0.875rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--Width
3px
.pf-c-accordion--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__expanded-content--m-fixed--MaxHeight
9.375rem
.pf-c-accordion__toggle.pf-m-expanded--pf-c-accordion__toggle--before--BackgroundColor
#06c
.pf-c-accordion__expanded-content.pf-m-expanded--pf-c-accordion__expanded-content-body--before--BackgroundColor
#06c

View source on Github