Navigieren auf digital.sbb.ch

Beta

Accordion

1. What does the module do?

  • It is used to structure content into different groups.

2. When should the module be used?

  • When clear groups need to be created within the content.
  • When the groups provide extra information for the user in addition to the main content.
  • The main usable element of the content should not be packed in an accordion.

3. Rules

  • An accordion can have 1 to n entries.
  • All accordions are always closed by default.
  • The accordion header always consists of a text title.
  • The title can be single-line as a maximum.
  • Icons in the title are not permitted.
  • The entire area of the accordion header is clickable and opens/closes the accordion.
  • Several or all entries can be opened at the same time. Alternatively, the ‘only one accordion expanded’ function can be used.
  • An accordion module within an accordion entry is not permitted.

4. Variants and statuses

The module has the following statuses:

  • Collapsed
  • Expanded

4.1 Standard

Image of the accordions

Design Specification

5. Accessibility

  • The status of the module must be entered in the title as alternative text (e.g. ‘collapsed’, ‘expanded’).

1. What does the module do?

  • It is used to structure content into different groups.

2. When should the module be used?

  • When clear groups need to be created within the content.
  • When the groups provide extra information for the user in addition to the main content.
  • The main usable element of the content should not be packed in an accordion.

3. Rules

  • An accordion can have 1 to n entries.
  • All accordions are always closed by default.
  • The accordion header always consists of a text title.
  • The title can be single-line as a maximum.
  • Icons in the title are not permitted.
  • The entire area of the accordion header is clickable and opens/closes the accordion.
  • Several or all entries can be opened at the same time. Alternatively, the ‘only one accordion expanded’ function can be used.
  • An accordion module within an accordion entry is not permitted.

4. Variants and statuses

The module has the following statuses:

  • Collapsed
  • Expanded

4.1 Standard

Image of the accordions

Design Specification

5. Accessibility

  • The status of the module must be entered in the title as alternative text (e.g. ‘collapsed’, ‘expanded’).