Examples
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 | <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-bordered | .pf-c-accordion | Modifies the accordion to add borders between items. |
.pf-m-display-lg | .pf-c-accordion | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
.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-fixed | .pf-c-accordion__expanded-content | Modifies 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--before--Top | 0 | ||
| .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--Color | #6a6e73 | ||
| .pf-c-accordion | --pf-c-accordion__expanded-content--FontSize | 0.875rem | ||
| .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 | --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-body--expanded-content-body--PaddingTop | 0 | ||
| .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-body--before--Top | 0 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--PaddingTop | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--PaddingRight | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--PaddingBottom | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--PaddingLeft | 1.5rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--FontFamily | '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--FontSize | 1.25rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color | #151515 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color | #151515 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color | #151515 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color | #151515 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content--FontSize | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content--Color | #151515 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop | 0 | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom | 1rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-accordion | --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft | 1.5rem | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered--BorderTopWidth | 1px | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered--BorderTopColor | #d2d2d2 | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__toggle--before--Top | calc(-1 * 1px) | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__toggle--after--BorderColor | #d2d2d2 | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth | 0 | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth | 1px | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth | 1px | ||
| .pf-c-accordion | --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor | #d2d2d2 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--PaddingTop | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--PaddingRight | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--PaddingBottom | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--PaddingLeft | 1.5rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--FontFamily | '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--FontSize | 1.25rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--hover__toggle-text--Color | #151515 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--active__toggle-text--Color | #151515 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--active__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--focus__toggle-text--Color | #151515 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--focus__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--m-expanded__toggle-text--Color | #151515 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight | 400 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content-body--PaddingTop | 0 | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content-body--PaddingRight | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content-body--PaddingBottom | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content-body--PaddingLeft | 1.5rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content--FontSize | 1rem | ||
| .pf-c-accordion.pf-m-display-lg | --pf-c-accordion__expanded-content--Color | #151515 | ||
| .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child | --pf-c-accordion__expanded-content-body--PaddingBottom | 1.5rem | ||
| .pf-c-accordion.pf-m-bordered | --pf-c-accordion__toggle--before--Top | calc(-1 * 1px) | ||
| .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded | --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth | 0 | ||
| .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 | ||
| .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body | --pf-c-accordion__expanded-content-body--PaddingTop | 0 | ||
View source on GitHub
