Accordion. Overview

Preview.

Header 1 Content1 Header 2 Content2

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.

Similar component.

Flip-Card Usage

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.

Specification.

Open in Figma
Examples Default.
Try it out on Storybook Show HTML
Milk.
Try it out on Storybook Show HTML
Borderless.
Try it out on Storybook Show HTML
Disabled.
Try it out on Storybook Show HTML
Milk Borderless.
Try it out on Storybook Show HTML
With Icon.
Try it out on Storybook Show HTML
Expanded.
Try it out on Storybook Show HTML
Multi.
Try it out on Storybook Show HTML
Size S.
Try it out on Storybook Show HTML
Size S With Icon.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

The <sbb-accordion> is a component which acts as a container
for one or more sbb-expansion-panel.

<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.

<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>.

<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.

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

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbAccordionElement, sbb-accordion.

Properties.

Name Attribute Privacy Type Default Description
multi multi public boolean false Whether more than one sbb-expansion-panel can be open at the same time.
size size public 's' | 'l' | null null Size variant, either s (lean theme default) or l (standard theme default). The property overrides the size on any projected sbb-expansion-panel.
titleLevel title-level public '1' | '2' | '3' | '4' | '5' | '6' | null null The heading level for the sbb-expansion-panel-headers within the component.

Slots.

Name Description
Use the unnamed slot to add sbb-expansion-panel elements.