# Accordion

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Container
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/accordion/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-accordion--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/accordion/overview (API: https://lyne-angular.app.sbb.ch/angular/components/accordion/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-8
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/accordion

## Elements

- `sbb-accordion`: It can be used as a container for one or more `sbb-expansion-panel` component.

## Related components

- Similar: [Flip-Card](https://digital.sbb.ch/en/design-system/lyne/components/flip-card/index.md)

## Overview

### What does the component do?
Hides content behind a title. The corresponding content can be shown or hidden by clicking on the title.

### When should the component be used?
* To structure content and improve the information architecture of a page.
* To avoid long scrolling.

### Rules.
* An accordion consists of at least two entries.
* Accordions are not nested.
* By default, only one entry is open at a time. Several open entries are possible (`multi`).
* The titles are marked up as headings (`titleLevel`) matching the heading hierarchy of the page.

## Implementation (web components)

The `<sbb-accordion>` is a component which acts as a container
for one or more [sbb-expansion-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-expansion-panel--docs).

```html
<sbb-accordion>
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
  </sbb-expansion-panel>
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 2</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
  </sbb-expansion-panel>
</sbb-accordion>
```

### Interaction

The `multi` property, if set, allows having more than one `<sbb-expansion-panel>` expanded at the same time.

```html
<sbb-accordion multi> ... </sbb-accordion>
```

### Style

The component has two different sizes, `s` and `l`, which can be changed using the `size` property.
The property overrides the `size` value of any inner `<sbb-expansion-panel>`.

```html
<sbb-accordion size="s"> ... </sbb-accordion>
```

The component has a `titleLevel` property, which is proxied to each inner `<sbb-expansion-panel-header>`, and can be used
to wrap the header of each `<sbb-expansion-panel>` in a heading tag; if the property is unset, a `div` is used.

In the following example, all the `<sbb-expansion-panel-header>` would be wrapped in a `h3` heading tag.

```html
<sbb-accordion title-level="3">
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
  </sbb-expansion-panel>
  ...
</sbb-accordion>
```

## API (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/accordion/api.md