@patternfly/patternfly

--- id: Accordion section: components cssPrefix: pf-c-accordion --- ## Examples ### Fluid ```html <div class="pf-c-accordion"> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item one</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item two</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item three</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle pf-m-expanded" aria-expanded="true"> <span class="pf-c-accordion__toggle-text">Item four</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-expanded"> <div class="pf-c-accordion__expanded-content-body">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.</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item five</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> </div> ``` ### Fixed ```html <div class="pf-c-accordion"> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item one</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle pf-m-expanded" aria-expanded="true"> <span class="pf-c-accordion__toggle-text">Item two</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-expanded pf-m-fixed"> <div class="pf-c-accordion__expanded-content-body">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.</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item three</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item four</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> <h3> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item five</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </h3> <div class="pf-c-accordion__expanded-content pf-m-fixed" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </div> </div> ``` ### Definition list ```html <dl class="pf-c-accordion"> <dt> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item one</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </dt> <dd class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </dd> <dt> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item two</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </dt> <dd class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </dd> <dt> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item three</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </dt> <dd class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </dd> <dt> <button class="pf-c-accordion__toggle pf-m-expanded" aria-expanded="true"> <span class="pf-c-accordion__toggle-text">Item four</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </dt> <dd class="pf-c-accordion__expanded-content pf-m-expanded"> <div class="pf-c-accordion__expanded-content-body">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.</div> </dd> <dt> <button class="pf-c-accordion__toggle" aria-expanded="false"> <span class="pf-c-accordion__toggle-text">Item five</span> <span class="pf-c-accordion__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </dt> <dd class="pf-c-accordion__expanded-content" hidden> <div class="pf-c-accordion__expanded-content-body">This text is hidden</div> </dd> </dl> ``` ## 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. |