# @patternfly/pfe-accordion

> Accordion for PatternFly Elements

Latest version **1.12.3** (published 2022-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @patternfly/pfe-accordion
pnpm add @patternfly/pfe-accordion
yarn add @patternfly/pfe-accordion
bun add @patternfly/pfe-accordion
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.12.3 |
| Published | 2022-02-01 |
| First published | 2019-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 584.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 395 |
| Maintainers | ctrowbri, dgutride, dlabrecq, patternfly-build, jeff-phillips-18, mturley, mwcz, kylebuch8, realredallen, ktotten, evwilkin, schulj12, castastrophe, nicolethoen, heymp, zhawkins |
| Keywords | web-components, html |

## Links

- npm: https://www.npmjs.com/package/@patternfly/pfe-accordion
- Repository: https://github.com/patternfly/patternfly-elements
- Homepage: https://github.com/patternfly/patternfly-elements#readme
- Issues: https://github.com/patternfly/patternfly-elements/issues
- npm.io page: https://npm.io/package/@patternfly/pfe-accordion

## Dependencies (1)

- [@patternfly/pfelement](https://npm.io/package/@patternfly/pfelement.md) ^1.12.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.12.3 (latest) — 2022-02-01
- 2.0.0-next.12 (next) — 2023-01-16
- 2.0.0-next.11 — 2023-01-05
- 2.0.0-next.10 — 2022-12-21
- 2.0.0-next.9 — 2022-11-16
- 2.0.0-next.8 — 2022-11-05
- 2.0.0-next.7 — 2022-10-25
- 2.0.0-next.6 — 2022-10-17
- 2.0.0-next.5 — 2022-08-23
- 2.0.0-next.4 — 2022-04-18
- 2.0.0-next.3 — 2022-03-23
- 2.0.0-next.2 — 2022-03-15
- 2.0.0-next.1 — 2022-03-08
- 2.0.0-next.0 — 2022-02-23
- 1.12.2 — 2021-11-16
- … 69 more at https://npm.io/package/@patternfly/pfe-accordion/versions

## README

# PFElements Accordion Element

## 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>
```

## Slots

### Default slot in pfe-accordion

Place the `pfe-accordion-header` and `pfe-accordion-panel` elements here.

### Default slot in pfe-accordion-header

We expect the light DOM of the `pfe-accordion-header` to be a heading level tag (h1, h2, h3, h4, h5, h6). This content is copied into shadow DOM and so most external styles will not penetrate.

### Default slot in pfe-accordion-panel

Add the content for your accordion panel here. This content remains in the light DOM; external styles will penetrate this region.

## Attributes

**`context`**
Changes the context of the accordion to one of 3 possible options:
- `light` (default)
- `dark`
- `saturated`

This will override any context being passed from a parent component and will add a style attribute setting the `--context` variable.

**`disclosure`**
If `pfe-accordion` has one `pfe-accordion-header`, it will get tagged with `disclosure="true"`. This applies a slightly different set of styles: chevron appears on the left side, the header has a single border on all four sides. Applying `disclosure="false"` to a `pfe-accordion` element containing only one header/panel pairing will set the element to display as a standard accordion.

**`history`**
Updates window.history and the URL to create sharable links. With the `history` attribute, the accordion *must* have an `id`.

The URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`. In the example
below, selecting "Accordion 2" will update the URL as follows: `?lorem-ipsum=2`. The index value for the expanded items starts at 1.

```html
<pfe-accordion history id="lorem-ipsum">
  <pfe-accordion-header>
    <h3>Accordion 1</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 1 panel content.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Accordion 2</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 2 panel content.</p>
  </pfe-accordion-panel>
</pfe-accordion>
```

To expand multiple sets, you can dash separate indexes: `?lorem-ipsum=1-2`.

*Note:* This feature is not supported in IE11.

**`expanded-index`**
Sets and reflects the currently expanded accordion indexes. Use commas to separate multiple indexes.  The index value for the expanded items starts at 1.

```html
<pfe-accordion expanded-index="2,3">
  ...
</pfe-accordion>
```

## Events

### pfe-accordion:change

Fires when an pfe-accordion-header is activated. The detail object contains the
following

```
detail: {
  expanded: Boolean
}
```

## API

### toggle(index)

Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.

### expand(index)

Accepts a 0-based index value (integer) for the set of accordion items to expand.

### expandAll()

Expands all accordion items.

### collapse(index)

Accepts a 0-based index value (integer) for the set of accordion items to collapse.

### collapseAll()

Collapse all accordion items.

## Styling hooks

| Theme hook | Description | Default |
| --- | --- | --- |
| `--pfe-accordion--Padding` | Applied to header and panel components | var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5) |
| `--pfe-accordion--BorderColor` | Color of the encompassing borders | var(--pfe-theme--color--surface--border, #d2d2d2) |
| `--pfe-accordion--BorderWidth` | Width of the encompassing borders | var(--pfe-theme--surface--border-width, 1px) |
| `--pfe-accordion--accent--width` | Width of the accent mark | var(--pfe-theme--surface--border-width--active, 3px) |
| `--pfe-accordion--Width` | Maximum width for the accordion element | 100% |
| `--pfe-accordion--MaxWidth--content` | Maximum width for the content inside the accordion panel | 80ch |
| `--pfe-accordion--BoxShadow` | Box shadow on the header and panel in closed state | 0 5px 4px transparent |
| `--pfe-accordion--ZIndex` | Accordion's z-index for the stack | 3 |
| `--pfe-accordion--FontSize--header` | Font-size for the accordion header text | var(--pf-global--FontSize--xl, 1.25rem) |
| `--pfe-accordion--FontWeight--header` | Font-weight for the accordion header text | var(--pfe-theme--font-weight--normal, 400) |
| `--pfe-accordion--TextAlign` | Text alignment for the accordion header text | left |
| `--pfe-accordion--BackgroundColor` | Background color for the accordion header and panel | transparent |
| `--pfe-accordion--Color` | Text color for the accordion header and panel | var(--pfe-broadcasted--text, #3c3f42) |
| `--pfe-accordion--accent` | Left accent line color for the accordion header and panel | transparent |
| `--pfe-accordion--BackgroundColor--active` | Background color when the accordion is active (hover, focus) | var(--pfe-theme--color--surface--lighter, #f0f0f0) |
| `--pfe-accordion--Color--active` | Text color when the accordion is active (hover, focus) | var(--pfe-broadcasted--text, #3c3f42) |
| `--pfe-accordion--accent--active` | Color of the accent mark when the accordion is active (hover, focus) | var(--pfe-theme--color--ui-accent, #06c) |
| `--pfe-accordion--BackgroundColor--expanded` | Background color when the accordion is open | var(--pfe-theme--color--surface--lightest, #fff) |
| `--pfe-accordion--Color--expanded` | Text color when the accordion is open | var(--pfe-broadcasted--text, #3c3f42) |
| `--pfe-accordion--accent--expanded` | Color of the accent mark when the accordion is open | var(--pfe-theme--color--ui-accent, #06c) |
| `--pfe-accordion--BoxShadow--expanded` | Box shadow when the accordion is open | 0 5px 4px rgba(140, 140, 140, 0.35) |

## Test

    npm run test

## Build

    npm run build

## Demo

From the PFElements root directory, run:

    npm start

## Code style

Accordion (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[web-component-tester]: https://github.com/Polymer/web-component-tester

---
_Source: https://npm.io/package/@patternfly/pfe-accordion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._