# PatternFly Elements Accordion
     
`<pf-accordion>` is a web component that provides a collapsible accordion interface for sectioned content.

Read more about Accordion in the [PatternFly Elements Accordion documentation](https://patternflyelements.org/components/accordion)

##  Installation

Load `<pf-accordion>` via CDN:

```html
<script src="https://jspm.dev/@patternfly/elements/pf-accordion/pf-accordion.js"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/elements
```

Then once installed, import it to your application:

```js
import '@patternfly/elements/pf-accordion/pf-accordion.js';
```
## Usage

```html
<pf-accordion>
  <pf-accordion-header>
    <h3>Consetetur sadipscing elitr?</h3>
  </pf-accordion-header>
  <pf-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>
  </pf-accordion-panel>
  <pf-accordion-header>
    <h3>Labore et dolore magna aliquyam erat?</h3>
  </pf-accordion-header>
  <pf-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>
  </pf-accordion-panel>
</pf-accordion>
```
                                                          
