Accordion

Configurator

LiveAccordion: title, content, divider and open state

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.

HTML

<oc-accordion-v1 title="Rücksendung" expanded><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.</p></oc-accordion-v1>

Usage

Anatomy

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

1234

Divider (optional)
Title
Affordance icon
Content

LiveAnatomy

HTML

<div class="anatomy" style="display:block;max-width:420px;margin:28px auto">
<oc-accordion-v1 title="Rücksendung" expanded><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1>
<span class="anatomy-pin" style="left:-4%;top:0%">1</span><span class="anatomy-pin" style="left:-4%;top:19%">2</span><span class="anatomy-pin" style="left:104%;top:19%">3</span><span class="anatomy-pin" style="left:-4%;top:72%">4</span>
<ol class="anatomy-key"><li data-n="1">Divider (optional)</li><li data-n="2">Title</li><li data-n="3">Affordance icon</li><li data-n="4">Content</li></ol>

Behavior

States

Expanded (hover, press or focus the title row)

Wir liefern in der Regel innerhalb von zwei bis vier Werktagen zu dir nach Hause.

LiveStates

HTML

<oc-accordion-v1 title="Lieferung" expanded>
  <p class="oc-copy-100">Wir liefern in der Regel innerhalb von zwei bis vier Werktagen zu dir nach Hause.</p>
</oc-accordion-v1>

Interaction

The accordion hides or reveals content when tapping on any area of the title row including the label and icon. The hitbox is horizontally extended by 8px. See row documentation for more details.

If tapped inside the expanded content, the accordion does not collapse.

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.

Click or tap the title, the icon or the title row to expand ↓

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.

Click or tap the title row again to collapse ↓

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.

Liveinteraction

HTML

<oc-accordion-v1 title="Rücksendung" hide-divider><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1><oc-accordion-v1 title="Punkte einlösen"><p class="oc-copy-100">Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.</p></oc-accordion-v1></div>
<p class="demo-label" style="text-align:center">Click or tap the title, the icon or the title row to expand ↓</p>
<oc-accordion-v1 title="Rücksendung" hide-divider expanded><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1><oc-accordion-v1 title="Punkte einlösen"><p class="oc-copy-100">Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.</p></oc-accordion-v1></div>
<p class="demo-label" style="text-align:center">Click or tap the title row again to collapse ↓</p>
<oc-accordion-v1 title="Rücksendung" hide-divider><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1><oc-accordion-v1 title="Punkte einlösen"><p class="oc-copy-100">Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.</p></oc-accordion-v1></div>

Animation

When expanding the accordion the affordance icon rotates 180° counterclockwise and the content slides out.

Collapsed

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Click: icon rotates 180°, content slides out

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Expanded

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Liveanimation

HTML

<p class="demo-label">Collapsed</p><oc-accordion-v1 title="Rücksendung"><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1></div>
<p class="demo-label">Click: icon rotates 180°, content slides out</p><oc-accordion-v1 title="Rücksendung"><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1></div>
<p class="demo-label">Expanded</p><oc-accordion-v1 title="Rücksendung" expanded><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1></div>

Fitting

The width of the accordion uses fill-parent by default. The height of the title row and the content always use fit-content so the following content is implicitly pushed downward.

fill-parent width, fit-content height

Wir liefern in der Regel innerhalb von zwei bis vier Werktagen zu dir nach Hause.

Livefitting

HTML

<oc-accordion-v1 title="Lieferung" expanded>
  <p class="oc-copy-100">Wir liefern in der Regel innerhalb von zwei bis vier Werktagen zu dir nach Hause.</p>
</oc-accordion-v1>

Placement

If you place more than one accordion on top of another, there will be no extra gap between them. This is because they are separated by the divider, which is part of the default component. Hide the divider for a standalone or first accordion in a row.

Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.

Du zahlst bequem per Rechnung, Ratenkauf, PayPal oder Kreditkarte.

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.

Für dieses Produkt gilt die gesetzliche Gewährleistung von zwei Jahren.

Liveplacement row

HTML

<oc-accordion-v1 title="Lieferung" hide-divider><p class="oc-copy-100">Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.</p></oc-accordion-v1>
<oc-accordion-v1 title="Zahlung"><p class="oc-copy-100">Du zahlst bequem per Rechnung, Ratenkauf, PayPal oder Kreditkarte.</p></oc-accordion-v1>
<oc-accordion-v1 title="Rücksendung"><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.</p></oc-accordion-v1>
<oc-accordion-v1 title="Garantie"><p class="oc-copy-100">Für dieses Produkt gilt die gesetzliche Gewährleistung von zwei Jahren.</p></oc-accordion-v1>

Divider

Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.

No divider (hide-divider)

Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.

Livedivider and no divider

HTML

<p class="demo-label">Divider</p>
<oc-accordion-v1 title="Lieferung"><p class="oc-copy-100">Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.</p></oc-accordion-v1>
<p class="demo-label">No divider (hide-divider)</p>
<oc-accordion-v1 title="Lieferung" hide-divider><p class="oc-copy-100">Wir liefern in der Regel innerhalb von zwei bis vier Werktagen.</p></oc-accordion-v1>

Best practices

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.

DoUse a short title to describe the content.

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken.

Don'tUse a long and overdescriptive title to describe the content.

Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.

DoUse the Accordion to provide additional Content like FAQs.

In den Warenkorb

Don'tUse the Accordion for relevant content which for example includes primary Buttons.

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Deine OTTO UP Punkte kannst du beim nächsten Einkauf im Warenkorb einlösen. 100 Punkte sind 1 € wert.

Don'tInterlock expanded states of different accordions to each other. This imposes paternalism on users.

Content guidelines

You can place any type of content in the content area, such as text.

Material100 % Baumwolle

PflegeMaschinenwäsche bei 30 °C

Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.

Livecontent guidelines

HTML

<div style="background:#fff;padding:16px"><oc-accordion-v1 title="Details" expanded><oc-row-v2 variant="two-columns" hide-divider><span slot="column-label">Material</span><span slot="column-text">100 % Baumwolle</span></oc-row-v2><oc-row-v2 variant="two-columns"><span slot="column-label">Pflege</span><span slot="column-text">Maschinenwäsche bei 30 °C</span></oc-row-v2></oc-accordion-v1></div>
<div style="background:#fff;padding:16px"><oc-accordion-v1 title="Rücksendung" expanded><p class="oc-copy-100">Du kannst deine Bestellung 30 Tage lang kostenlos zurückschicken. Den Rücksendeschein findest du in deinem Kundenkonto.</p></oc-accordion-v1></div>

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Live demo

Hilfe & Kontakt

Wie können wir dir helfen?

Unter „Meine Bestellungen“ siehst du den aktuellen Status und die Sendungsverfolgung. Sobald dein Paket unterwegs ist, schicken wir dir zusätzlich eine E-Mail.

Melde die Rücksendung in deinem Kundenkonto an, druck das Etikett aus oder zeig den QR-Code im Paketshop vor. Die Rücksendung ist kostenlos.

Sobald deine Rücksendung bei uns angekommen ist, erstatten wir den Betrag innerhalb von drei Werktagen auf dein Zahlungsmittel.

Ja. Du hast 30 Tage Zeit, deine Rechnung zu bezahlen. Alternativ kannst du auch per PayPal, Kreditkarte oder in Raten zahlen.

Kundenservice kontaktieren

LiveReal OTTO components, rendered by the OTTO component runtime

HTML

<div class="on-frame" style="padding:32px 16px">
<div style="width:100%;max-width:390px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)">
<div style="display:grid;gap:16px;padding:20px 16px">
  <div><p class="oc-copy-75" style="color:var(--oc-semantic-color-text-secondary)" style="margin:0">Hilfe &amp; Kontakt</p><p class="oc-headline-200" style="margin:0">Wie können wir dir helfen?</p></div>
  <oc-search-field-v1><input type="search" placeholder="Frage oder Stichwort eingeben" spellcheck="false"></oc-search-field-v1>
  <div>
    <oc-accordion-v1 title="Wo ist meine Bestellung?" hide-divider expanded><p class="oc-copy-100">Unter „Meine Bestellungen“ siehst du den aktuellen Status und die Sendungsverfolgung. Sobald dein Paket unterwegs ist, schicken wir dir zusätzlich eine E-Mail.</p></oc-accordion-v1>
    <oc-accordion-v1 title="Wie schicke ich einen Artikel zurück?"><p class="oc-copy-100">Melde die Rücksendung in deinem Kundenkonto an, druck das Etikett aus oder zeig den QR-Code im Paketshop vor. Die Rücksendung ist kostenlos.</p></oc-accordion-v1>
    <oc-accordion-v1 title="Wann bekomme ich mein Geld zurück?"><p class="oc-copy-100">Sobald deine Rücksendung bei uns angekommen ist, erstatten wir den Betrag innerhalb von drei Werktagen auf dein Zahlungsmittel.</p></oc-accordion-v1>
    <oc-accordion-v1 title="Kann ich auf Rechnung bezahlen?"><p class="oc-copy-100">Ja. Du hast 30 Tage Zeit, deine Rechnung zu bezahlen. Alternativ kannst du auch per PayPal, Kreditkarte oder in Raten zahlen.</p></oc-accordion-v1>
  <oc-button-v1 variant="secondary" icon-type-left="chat">Kundenservice kontaktieren</oc-button-v1>

Code

Version	Tag	Status	API
v1	`<oc-accordion-v1>`	Stable, allowed for generation	AccordionV1

Overview (v1)

The accordion component offers a range of customization options, including settings for the main text, controlling the expansion state, and managing the visibility of the top divider. It also supports specific events for opening and closing actions, along with a designated area for adding long content within the expanded section that can be toggled on and off.

Default variation

PLACEHOLDER

HTML

<oc-accordion-v1 title="Label">
<div><oc-placeholder-v1 variant="text" class="oc-headline-100">PLACEHOLDER</oc-placeholder-v1></div>
</oc-accordion-v1>

Configuration

This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the accordion component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Accordion UX documentation for detailed user experience guidelines.

Accessibility

The accordion component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Behavior

The trigger that shows and hides the content has role button. When the content is visible, the trigger with role button has aria-expanded set to true. When the content area is hidden, it is set to false. The content itself is a role="region". It is hidden when not expanded. We cannot use aria-hidden in this instance because the content might contain interactive elements which may not be place in an aria-hidden container. These attributes care so the users are not interrupted by a large content block they may not be interested in. The aria-expanded attribute then helps the screen reader to identify this region properly, so that a user can actively decide whether the content should be able to be parsed or not.

The accordion component supports keyboard navigation for accessibility purposes. The following table lists the keyboard shortcuts available for this component:

Shortcut	Description
Tab	Focuses the trigger.
Space / Enter	While focused, toggles the trigger to open or close the accordion.

Configuration (v1)

Accordion configuration

Configure the accordion component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

PLACEHOLDER

HTML

<oc-accordion-v1 title="Label">
<div><oc-placeholder-v1 variant="text" class="oc-headline-100">PLACEHOLDER</oc-placeholder-v1></div>
</oc-accordion-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Accordion v1 API

API: `<oc-accordion-v1>` (AccordionV1)

Attributes / properties

Attribute	Type	Default	Required	Description
`title`	`string`	`""`	yes	Sets the main text content of the accordion.
`expanded`	`boolean`	`false`	no	Indicates whether the accordion is expanded.
`hide-divider`	`boolean`	`false`	no	Indicates whether the top divider is hidden.

Slots

Slot	Required	Description
`title`	yes	Sets the content that appears in the title area.
`default`	yes	Sets the content that appears in the expanded area.

Events

Event	Detail type	Description
`oc-accordion-open`	`CustomEvent<null>`	Opening an accordion triggers the `oc-open` event.
`oc-accordion-close`	`CustomEvent<null>`	Closing an accordion triggers the `oc-close` event.
`oc-open`	`CustomEvent<null>`	Opening an accordion triggers the `oc-open` event.
`oc-close`	`CustomEvent<null>`	Closing an accordion triggers the `oc-close` event.
`oc-property-change`	`OcAccordionV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Variations

Listed below are the most common variations of the accordion component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-accordion-variations--default · tags:

The default configuration is in a collapsed expansion state with a placeholder component in the default slot.

Args: defaultSlot=<div><oc-placeholder-v1 variant="text" class="oc-headline-100">PLACEHOLDER</oc-placeholder-v1></div>

PLACEHOLDER

HTML

<oc-accordion-v1 title="Label">
<div><oc-placeholder-v1 variant="text" class="oc-headline-100">PLACEHOLDER</oc-placeholder-v1></div>
</oc-accordion-v1>

Demo: custom title and expanded

Story: components-accordion-variations--demo-custom-title-and-expanded · tags:

A demo showcasing the accordion with a custom title and the expanded state.

Args: title=Custom Title, expanded=true, defaultSlot=(see snippet)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac dignissim massa. Suspendisse potenti. Vestibulum vitae nunc vel est ultricies condimentum non eget orci. Quisque nec arcu rutrum, sollicitudin ligula non, vulputate leo. In ipsum magna, vehicula at hendrerit ut, aliquet in lorem. Vivamus id porttitor orci. Praesent ac nunc sit amet est cursus sollicitudin. Sed rhoncus aliquam mi. Quisque gravida vestibulum nunc non posuere. Aliquam at congue mauris. Vivamus porttitor mauris eu felis pellentesque, pharetra faucibus lorem vehicula. Donec quis consectetur sapien, a ullamcorper risus. Praesent id arcu velit. Quisque sapien nibh, porta id orci nec, mattis pellentesque nisl. Phasellus at dapibus neque, a volutpat elit. Sed eu orci sollicitudin, fringilla arcu vel, rhoncus ipsum. Aenean vel efficitur sem. Nam ante velit, elementum in tortor et, maximus consectetur nibh. Morbi et ligula vitae metus pellentesque feugiat. Phasellus et nisl nisi. Phasellus condimentum vitae arcu vitae congue. Morbi et libero in urna efficitur lobortis in eget nunc. Etiam ligula augue, pulvinar eu gravida at, molestie ut enim. Vivamus sed leo gravida, dictum ex in, vehicula turpis. Praesent sollicitudin posuere suscipit. Proin eleifend suscipit risus. Aliquam at nibh libero. Donec bibendum, nisi a fringilla hendrerit, risus risus fringilla turpis, ut vulputate felis lectus a ligula. Sed libero diam, accumsan ut orci et, lobortis pretium dui. Donec elementum, felis id ultricies cursus, odio nunc congue erat, eu venenatis eros ligula id nisl. Nunc auctor vel metus et hendrerit. Aliquam cursus tristique purus ut interdum. Ut rhoncus ultricies ultrices. Ut eget volutpat augue. Ut fermentum sit amet elit ut volutpat. In hac habitasse platea dictumst. Integer ut mauris ut arcu efficitur convallis vitae sit amet lacus. Duis convallis pharetra diam et viverra. Mauris consequat dignissim hendrerit. Aliquam sit amet metus porttitor ligula aliquet volutpat vitae sit amet nulla. Curabitur mattis, neque nec condimentum rutrum, orci nulla accumsan orci, ut pellentesque elit quam vel purus. Phasellus a dictum velit, sit amet mattis lectus. Cras diam libero, ultricies id consectetur sed, elementum in magna. Pellentesque at felis accumsan, luctus enim in, lacinia enim. Ut tortor nibh, volutpat eget vestibulum condimentum, scelerisque finibus sapien. Aliquam id ipsum sed ex auctor varius. Vivamus molestie risus euismod purus sodales laoreet. Aliquam condimentum dapibus sapien, eget congue risus consectetur vitae. Proin in porttitor mauris. Quisque id libero hendrerit sem lacinia gravida.

HTML

<oc-accordion-v1 title="Custom Title" expanded>
<p class="oc-copy-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac dignissim massa.
    Suspendisse potenti. Vestibulum vitae nunc vel est ultricies condimentum non eget orci.
    Quisque nec arcu rutrum, sollicitudin ligula non, vulputate leo. In ipsum magna, vehicula at
    hendrerit ut, aliquet in lorem. Vivamus id porttitor orci. Praesent ac nunc sit amet est
    cursus sollicitudin. Sed rhoncus aliquam mi. Quisque gravida vestibulum nunc non posuere.
    Aliquam at congue mauris. Vivamus porttitor mauris eu felis pellentesque, pharetra faucibus
    lorem vehicula. Donec quis consectetur sapien, a ullamcorper risus. Praesent id arcu velit.
    Quisque sapien nibh, porta id orci nec, mattis pellentesque nisl. Phasellus at dapibus neque,
    a volutpat elit. Sed eu orci sollicitudin, fringilla arcu vel, rhoncus ipsum. Aenean vel
    efficitur sem. Nam ante velit, elementum in tortor et, maximus consectetur nibh. Morbi et
    ligula vitae metus pellentesque feugiat. Phasellus et nisl nisi. Phasellus condimentum vitae
    arcu vitae congue. Morbi et libero in urna efficitur lobortis in eget nunc. Etiam ligula
    augue, pulvinar eu gravida at, molestie ut enim. Vivamus sed leo gravida, dictum ex in,
    vehicula turpis. Praesent sollicitudin posuere suscipit. Proin eleifend suscipit risus.
    Aliquam at nibh libero. Donec bibendum, nisi a fringilla hendrerit, risus risus fringilla
    turpis, ut vulputate felis lectus a ligula. Sed libero diam, accumsan ut orci et, lobortis
    pretium dui. Donec elementum, felis id ultricies cursus, odio nunc congue erat, eu venenatis
    eros ligula id nisl. Nunc auctor vel metus et hendrerit. Aliquam cursus tristique purus ut
    interdum. Ut rhoncus ultricies ultrices. Ut eget volutpat augue. Ut fermentum sit amet elit ut
    volutpat. In hac habitasse platea dictumst. Integer ut mauris ut arcu efficitur convallis
    vitae sit amet lacus. Duis convallis pharetra diam et viverra. Mauris consequat dignissim
    hendrerit. Aliquam sit amet metus porttitor ligula aliquet volutpat vitae sit amet nulla.
    Curabitur mattis, neque nec condimentum rutrum, orci nulla accumsan orci, ut pellentesque elit
    quam vel purus. Phasellus a dictum velit, sit amet mattis lectus. Cras diam libero, ultricies
    id consectetur sed, elementum in magna. Pellentesque at felis accumsan, luctus enim in,
    lacinia enim. Ut tortor nibh, volutpat eget vestibulum condimentum, scelerisque finibus
    sapien. Aliquam id ipsum sed ex auctor varius. Vivamus molestie risus euismod purus sodales
    laoreet. Aliquam condimentum dapibus sapien, eget congue risus consectetur vitae. Proin in
    porttitor mauris. Quisque id libero hendrerit sem lacinia gravida.</p>
</oc-accordion-v1>

Demo: custom title with markup

Story: components-accordion-variations--demo-title-with-markup · tags:

A demo showcasing the accordion with a custom markup in title slot

Args: titleSlot=(see snippet), defaultSlot=<p class="oc-copy-100">Lorem ipsum dolor sit amet</p>

Custom Title

Lorem ipsum dolor sit amet

HTML

<oc-accordion-v1 title="Label">
<div  style="display: flex; align-items: center" slot="title"><oc-icon-v1 type="chat"></oc-icon-v1><span style="margin-left:10px">Custom Title</span></div>
<p class="oc-copy-100">Lorem ipsum dolor sit amet</p>
</oc-accordion-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: custom title with markup",
  args: {
    titleSlot: `<div  style="display: flex; align-items: center" slot="title"><oc-icon-v1 type="chat"></oc-icon-v1><span style="margin-left:10px">Custom Title</span></div>`,
    defaultSlot: `<p class="oc-copy-100">Lorem ipsum dolor sit amet</p>`
  }
}

Demo: payment plans accordion

Story: components-accordion-variations--demo-payment-plans-accordion · tags:

A demo showcasing the accordion used for payment plans with a custom markup in title slot

Args: titleSlot=(see snippet), defaultSlot=<p class="oc-copy-100">Lorem ipsum dolor sit amet</p>

Du zahlst monatlich 36,69 €

Letzte Monatsrate abweichend: 36,69 €

Lorem ipsum dolor sit amet

HTML

<style>
.accordion_header-split *:nth-child(2) {
  margin-right: 14px;
}
.accordion_header-split {
  display: flex;
  justify-content: space-between;
}
.accordion_header-subtitle {
  font-weight: normal;
}
.pay_color-text-secondary {
  color: var(--oc-semantic-color-text-secondary);
}
</style>
<oc-accordion-v1 title="Label"
><div slot="title">
      <div class="accordion_header-split pay_payment-plan-detail">
        <span> Du zahlst monatlich </span>
        <span>36,69 €</span>
      <div
        class="accordion_header-split accordion_header-subtitle oc-copy-100 pay_color-text-secondary pay_payment-plan-detail"
      >
        <span>Letzte Monatsrate abweichend:</span>
        <span>36,69 €</span>
 <p class="oc-copy-100">Lorem ipsum dolor sit amet</p>
</oc-accordion-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: payment plans accordion",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  args: {
    titleSlot: `<div slot="title">
        <div class="accordion_header-split pay_payment-plan-detail">
          <span> Du zahlst monatlich </span>
          <span>36,69 €</span>
        </div>

        <div
          class="accordion_header-split accordion_header-subtitle oc-copy-100 pay_color-text-secondary pay_payment-plan-detail"
        >
          <span>Letzte Monatsrate abweichend:</span>
          <span>36,69 €</span>
        </div>
      </div>`,
    defaultSlot: `<p class="oc-copy-100">Lorem ipsum dolor sit amet</p>`
  },
  render(args) {
    const {
      titleSlot,
      defaultSlot,
      ...props
    } = args;
    return html`
      <style>
        .accordion_header-split *:nth-child(2) {
          margin-right: 14px;
        }

        .accordion_header-split {
          display: flex;
          justify-content: space-between;
        }

        .accordion_header-subtitle {
          font-weight: normal;
        }

        .pay_color-text-secondary {
          color: var(--oc-semantic-color-text-secondary);
        }
      </style>
      <oc-accordion-v1 ${spread(props)}
        >${unsafeHTML(titleSlot)} ${unsafeHTML(defaultSlot)}
      </oc-accordion-v1>
    `;
  }
}

Interaction tests (AccordionV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Expand On Click

Story: components-accordion-interaction-tests--expand-on-click · tags: play-fn

Collapse On Click

Story: components-accordion-interaction-tests--collapse-on-click · tags: play-fn

Configurator

Usage

Anatomy

Behavior

States

Interaction

Animation

Fitting

Placement

Best practices

Content guidelines

Accessibility

Status

Implementation

Live demo

Code

Overview (v1)

Accordion

Default variation

Configuration

Usage guidelines

Accessibility

Behavior

Keyboard navigation

Further reading

Configuration (v1)

Accordion configuration

API v1

Accordion v1 API

API: <oc-accordion-v1> (AccordionV1)

Attributes / properties

Slots

Events

Variations (v1)

Variations

Default

Demo: custom title and expanded

Demo: custom title with markup

Demo: payment plans accordion

Interaction tests (AccordionV1.interactions.stories.ts)

Expand On Click

Collapse On Click

API: `<oc-accordion-v1>` (AccordionV1)