Accordion
Accordions are used to deliver a lot of content in a small space, allowing the user to expand and collapse the component to show or hide information. In the collapsed state, the user will see the most important details about a topic. They can click on the accordion to expand the content area and view additional details.
ExamplesDocumentationCSS VariablesExamples
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-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--BorderLeftColor | 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--m-expanded--BorderWidth | 3px | ||
| .pf-c-accordion | --pf-c-accordion__toggle--m-expanded--BorderLeftColor | #06c | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--hover--Color | #06c | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--hover--FontWeight | 500 | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--active--Color | #06c | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--active--FontWeight | 500 | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--focus--Color | #06c | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--focus--FontWeight | 500 | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--expanded--Color | #06c | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--expanded--FontWeight | 500 | ||
| .pf-c-accordion | --pf-c-accordion__toggle-text--MaxWidth | calc(100% - 1.5rem) | ||
| .pf-c-accordion | --pf-c-accordion__toggle-icon--LineHeight | 1.5 | ||
| .pf-c-accordion | --pf-c-accordion__toggle-icon--Transition | .2s ease-in 0s | ||
| .pf-c-accordion | --pf-c-accordion__toggle--m-expanded__toggle-icon--Transform | 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--BorderLeftColor | transparent | ||
| .pf-c-accordion | --pf-c-accordion__expanded-content--m-expanded--BorderWidth | 3px | ||
| .pf-c-accordion | --pf-c-accordion__expanded-content--m-expanded--BorderLeftColor | #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--BorderLeftColor | #06c | ||
| .pf-c-accordion__expanded-content.pf-m-expanded | --pf-c-accordion__expanded-content--BorderLeftColor | #06c | ||
