# Accordion

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Container
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/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

## Elemente

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

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Versteckt Inhalt hinter einem Titel. Mit einem Klick auf den Titel kann der dazugehörige Inhalt ein- und ausgeblendet werden.

### Wann soll die Komponente eingesetzt werden?
* Um Inhalt zu strukturieren und die Informationsarchitektur einer Seite zu verbessern.
* Um langes Scrollen zu vermeiden.

### Regeln.
* Ein Accordion besteht aus mindestens zwei Einträgen.
* Accordions werden nicht ineinander verschachtelt.
* Standardmässig ist nur ein Eintrag gleichzeitig geöffnet. Mehrere gleichzeitig offene Einträge sind möglich (`multi`).
* Die Titel sind als Überschriften ausgezeichnet (`titleLevel`), passend zur Überschriftenhierarchie der Seite.

## Implementation (Web Components, Englisch)

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, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/accordion/api.md