Examples
Documentation
Overview
There are two variations to build the accordion component. The first is to use <div> and <h1 - h6> tags:
.pf-v6-c-accordionis placed on a<div>,.pf-v6-c-accordion__toggleis placed on a<button>that is inside a<h1-h6>, and.pf-v6-c-accordion__expandable-contentis placed on a<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:
.pf-v6-c-accordionis placed on a<dl>,.pf-v6-c-accordion__toggleis placed on a<button>that is inside a<dt>, and.pf-v6-c-accordion__expandable-contentis placed on a<dd>.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-accordion | <div>, <dl> | Initiates an accordion component. Required |
.pf-v6-c-accordion__item | <div> | Initiates an accordion item component. Required |
.pf-v6-c-accordion__toggle | <h1-h6><button>, <dt><button> | Initiates a toggle in the accordion. Required |
.pf-v6-c-accordion__toggle-text | <span> | Initiates the text inside the toggle. Required |
.pf-v6-c-accordion__toggle-icon | <span> | Initiates the toggle icon wrapper. Required |
.pf-v6-c-accordion__expandable-content | <div>, <dd> | Initiates expandable content. Must be paired with a button |
.pf-v6-c-accordion__expandable-content-body | <div> | Initiates expandable content body. Required |
.pf-m-plain | .pf-v6-c-accordion | Modifies the accordion have plain styles. |
.pf-m-no-plain-on-glass | .pf-v6-c-accordion | Prevents the accordion from automatically applying plain styling when glass theme is enabled. |
.pf-m-bordered | .pf-v6-c-accordion | Modifies the accordion to add borders between items. |
.pf-m-display-lg | .pf-v6-c-accordion | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
.pf-m-toggle-start | .pf-v6-c-accordion | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
.pf-m-expanded | .pf-v6-c-accordion__item | Modifies the accordion item for the expanded state. |
.pf-m-fixed | .pf-v6-c-accordion__expandable-content | Modifies the expandable content for the fixed state. |
