Accordion. Info

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 improve the information architecture of a page or to structure content.
  • To avoid long scrolling.
  • To ensure/provide clarity.

Rules.

  • An accordion should consist of at least two entries.
  • Nested accordions are not permitted.
Flip-Card Expansion-Panel
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Component sbb-extension-panel No
2 Component sbb-expansion-panel-header No
2a Component sbb-icon Yes
2b Text Label No
2c Component sbb-icon No Zeigt den Zustand an
3 Component sbb-expansion-panel-content No
3a Slot Beliebiger Inhalt erlaubt No
Demo

Playground.

Header 1 Content1 Header 2 Content2
Sizes S L Allow multiple opened items No Yes Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
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

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>

API Documentation.

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.