No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Accordion

Figma Design

Toggle the visibility of a set of related content in your project.

The <post-accordion> is a container for <post-accordion-item> components. It is used to manage how content is shown and hidden across a set of collapsible elements.

Title 1

Example content for accordion item 1. This is a sample text demonstrating how the accordion component works.

 Title 2

Example content for accordion item 2. This is a sample text demonstrating how the accordion component works.

 Title 3

Example content for accordion item 3. This is a sample text demonstrating how the accordion component works.

 
<post-accordion heading-level="3">
  <post-accordion-item>
    <span slot="header">Title 1</span>
    <div>
      <p>
        Example content for accordion item 1. This is a sample text demonstrating how the accordion
        component works.
      </p>
    </div>
  </post-accordion-item>

  <post-accordion-item>
    <span slot="header">Title 2</span>
    <div>
      <p>
        Example content for accordion item 2. This is a sample text demonstrating how the accordion
        component works.
      </p>
    </div>
  </post-accordion-item>

  <post-accordion-item>
    <span slot="header">Title 3</span>
    <div>
      <p>
        Example content for accordion item 3. This is a sample text demonstrating how the accordion
        component works.
      </p>
    </div>
  </post-accordion-item>
</post-accordion>

<post-accordion>

NameDescriptionDefaultControl
props
multiple
If true, multiple post-accordion-item can be open at the same time.
boolean
false
heading-level*
Defines the hierarchical level of the post-accordion-item headers within the headings structure.
123456
Content
logoSrc
Define an image src to insert a custom image.

Do you need an example? Try our logo /assets/images/logo-swisspost.svg.

string
-
methods
collapseAll
Collapses all post-accordion-item.
collapseAll() => Promise<void>
--
expandAll

Expands all post-accordion-item.

If multiple="true" is not set and all items are closed, it will open the first one. Otherwise, it will keep the opened one.

expandAll() => Promise<void>
--
toggle
Toggles the post-accordion-item with the given id.
toggle(id: string) => Promise<void>
--
slots
default
Slot for placing post-accordion-item components.
other
--
Events
postToggle

An event emitted when a post-accordion-item is opened or closed, before the transition.

The event payload is a CustomEvent whose target is the toggled post-accordion-item and whose detail is a boolean: true if the item was opened, false if it was closed.

CustomEvent<boolean>
--

<post-accordion-item>

NameDescriptionDefaultControl
props
collapsed
If true, the element is collapsed otherwise it is displayed.
boolean
false
-
methods
toggle
Triggers the collapse programmatically.
toggle(force?: boolean) => Promise<boolean>
--
slots
default
Slot for placing content within the accordion item's body.
other
--
header
Slot for placing custom content within the accordion item's header.
other
--
logo
Slot for the placing a logo before the header.
other
--
css shadow parts
body
The pseudo-element, used to override styles on the components internal body element.
css selector
--
button
The pseudo-element, used to override styles on the components internal header button element.
css selector
--

The <post-accordion> element is part of the @swisspost/design-system-components package. For more information, read the getting started with components guide.

By default, whenever a panel is opened manually or programmatically, any other open panel is closed. To allow multiple panels to be open at the same time, use the multiple="true" property.

Title 1

Example content for accordion item 1. This is a sample text demonstrating how the accordion component works.

 Title 2

Example content for accordion item 2. This is a sample text demonstrating how the accordion component works.

 Title 3

Example content for accordion item 3. This is a sample text demonstrating how the accordion component works.

To enhance individual accordion items with a logo, add an <img> to the logo slot. This will display the logo in front of the accordion item's heading.

logo Title 1

Example content for accordion item 1. This is a sample text demonstrating how the accordion component works.

 logo Title 2

Example content for accordion item 2. This is a sample text demonstrating how the accordion component works.

 logo Title 3

Example content for accordion item 3. This is a sample text demonstrating how the accordion component works.

Use the collapsed="true" property on all post-accordion-item you want to be initially closed. The first panel without this property will be initially open, or if the accordion is configured with the multiple="true" property, all other panels will be open.

Title 1

Example content for accordion item 1. This is a sample text demonstrating how the accordion component works.

 Title 2

Example content for accordion item 2. This is a sample text demonstrating how the accordion component works.

 Title 3

Example content for accordion item 3. This is a sample text demonstrating how the accordion component works.

To ensure accessibility, all accordion titles are contained within heading tags (h1-h6) behind the scenes. It is essential to set the appropriate heading-level property on the post-accordion so that it matches the structure of your page properly.

Title 1 h4

Example content for accordion item 1. This is a sample text demonstrating how the accordion component works.

Title 1.1 h5

Example content for accordion item 1.1. This is a sample text demonstrating how the accordion component works.

 Title 1.2 h5

Example content for accordion item 1.2. This is a sample text demonstrating how the accordion component works.

 Title 1.3 h5

Example content for accordion item 1.3. This is a sample text demonstrating how the accordion component works.
Title 2 h4

Example content for accordion item 2. This is a sample text demonstrating how the accordion component works.

Title 2.1 h5

Example content for accordion item 2.1. This is a sample text demonstrating how the accordion component works.

 Title 2.2 h5

Example content for accordion item 2.2. This is a sample text demonstrating how the accordion component works.

 Title 2.3 h5

Example content for accordion item 2.3. This is a sample text demonstrating how the accordion component works.
Title 3 h4

Example content for accordion item 3. This is a sample text demonstrating how the accordion component works.

The <post-accordion> offers several methods to expand or collapse the <post-accordion-item> it contains.

Expand or collapse all elements at once using .expandAll() and .collapseAll() respectively, or toggle just one using .toggle() specifying the id of the element you want to act on.

const accordion = document.querySelector('post-accordion') as HTMLPostAccordionElement;
accordion.expandAll();
accordion.collapseAll();
accordion.toggle('collapsibleId');