@patternfly/pfe-accordion

PatternFly Elements Accordion

<pfe-accordion> is a web component that provides a collapsible accordion interface for sectioned content.

Read more about Accordion in the PatternFly Elements Accordion documentation

Installation

Load <pfe-accordion> via CDN:

<script src="https://unpkg.com/@patternfly/pfe-accordion?module"></script>

Or, if you are using NPM, install it

npm install @patternfly/pfe-accordion

Then once installed, import it to your application:

import '@patternfly/pfe-accordion';

Usage

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Consetetur sadipscing elitr?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Labore et dolore magna aliquyam erat?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </pfe-accordion-panel>
</pfe-accordion>