Expander

Configurator

LiveExpander: variant, cutoff height, fade, labels and open state

Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer.

Mehr anzeigenWeniger anzeigen

HTML

<oc-expander-v1 variant="text-primary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer.</p><span slot="show-more-text">Mehr anzeigen</span><span slot="show-less-text">Weniger anzeigen</span></oc-expander-v1>

Usage

Anatomy

1234

Truncated content
Fade
Affordance icon
Label

LiveAnatomy

HTML

<div class="anatomy" style="display:block;max-width:420px;margin:28px auto">
<oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>
<span class="anatomy-pin" style="left:-5%;top:12%">1</span><span class="anatomy-pin" style="left:-5%;top:58%">2</span><span class="anatomy-pin" style="left:2.5%;top:78%">3</span><span class="anatomy-pin" style="left:31%;top:78%">4</span>
<ol class="anatomy-key"><li data-n="1">Truncated content</li><li data-n="2">Fade</li><li data-n="3">Affordance icon</li><li data-n="4">Label</li></ol>

Variants

The expander is available in the following variants. Both variants can be used as secondary or primary variant.

row: Use the row expander if you want to truncate a list of rows.
text: Use the text expander if you want to truncate content, such as text.

row-primary

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

text-primary

row-secondary

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

text-secondary

Liverow-primary, text-primary, row-secondary and text-secondary (L to R)

HTML

<p class="demo-label">row-primary</p>
<oc-expander-v1 variant="row-primary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><oc-row-v2 as-button icon-right="arrow-right">Damenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Herrenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Kindermode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Schuhe</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Sport</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Wäsche</oc-row-v2></oc-expander-v1>
<p class="demo-label">text-primary</p>
<oc-expander-v1 variant="text-primary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>
<p class="demo-label">row-secondary</p>
<oc-expander-v1 variant="row-secondary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><oc-row-v2 as-button icon-right="arrow-right">Damenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Herrenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Kindermode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Schuhe</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Sport</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Wäsche</oc-row-v2></oc-expander-v1>
<p class="demo-label">text-secondary</p>
<oc-expander-v1 variant="text-secondary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>

Behavior

States

Primary (hover, press or focus it)

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

Secondary (hover, press or focus it)

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

Livestates - expanded

HTML

<p class="demo-label">Primary (hover, press or focus it)</p>
<oc-expander-v1 variant="row-primary" hide-fade oc-aria-label="Produktbeschreibung"><oc-row-v2 as-button icon-right="arrow-right">Damenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Herrenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Kindermode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Schuhe</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Sport</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Wäsche</oc-row-v2></oc-expander-v1>
<p class="demo-label">Secondary (hover, press or focus it)</p>
<oc-expander-v1 variant="row-secondary" hide-fade oc-aria-label="Produktbeschreibung"><oc-row-v2 as-button icon-right="arrow-right">Damenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Herrenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Kindermode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Schuhe</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Sport</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Wäsche</oc-row-v2></oc-expander-v1>

Interaction

Tap anywhere on the expander, including the fade, to expand or truncate the content.
When you expand the content, the expander moves to the bottom of the content. Tapping on the expander again will collapse it and move it back to its starting position. The hitbox is horizontally extended by 8px. See row documentation for more details.

If the starting position is outside of the viewport before collapsing, the expander lets the view scrolls up to this position. This helps users maintaining their position within the page when collapsing long content.

Click or tap the expander to expand ↓

Click or tap the expander to collapse ↓

Liveinteraction

HTML

<div style="background:#fff;padding:16px;width:100%;max-width:400px;box-sizing:border-box"><oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>
<p class="demo-label" style="text-align:center">Click or tap the expander to expand ↓</p>
<div style="background:#fff;padding:16px;width:100%;max-width:400px;box-sizing:border-box"><oc-expander-v1 variant="text-primary" cutoff-height="120" expanded oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>
<p class="demo-label" style="text-align:center">Click or tap the expander to collapse ↓</p>
<div style="background:#fff;padding:16px;width:100%;max-width:400px;box-sizing:border-box"><oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>

Animation

When expanding the expander the arrow icon rotates 180° counterclockwise and the expander moves to the bottom of the expanded content.

Collapsed

Click: icon rotates, content slides out

Expanded

LiveAnimation

HTML

<p class="demo-label">Collapsed</p><oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>
<p class="demo-label">Click: icon rotates, content slides out</p><oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>
<p class="demo-label">Expanded</p><oc-expander-v1 variant="text-primary" cutoff-height="120" expanded oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1></div>

Fitting

By default, the width of the expander uses fill-parent. The height of the container is the same as the height of the row. The height of the fade is fixed, but can be adjusted as needed.

cutoff-height 100, fill-parent width

Livefitting

HTML

<oc-expander-v1 variant="text-primary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>

Placement

Place the expander at the position where you want to truncate the content. Make sure the beginning of the truncated content is visible. The width of the expander should be the same as the truncated content.

Use the fade to differentiate the truncated content from the expander. You have the option of hiding the fade. The row expander has a divider, if the fade is hidden.

Row expander

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

Text expander

Liveplacement expander row and text

HTML

<p class="demo-label">Row expander</p>
<oc-expander-v1 variant="row-primary" cutoff-height="150" oc-aria-label="Produktbeschreibung"><oc-row-v2 as-button icon-right="arrow-right">Damenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Herrenmode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Kindermode</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Schuhe</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Sport</oc-row-v2><oc-row-v2 as-button icon-right="arrow-right">Wäsche</oc-row-v2></oc-expander-v1>
<p class="demo-label">Text expander</p>
<oc-expander-v1 variant="text-primary" cutoff-height="150" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>

Fade

Fade hidden (hide-fade)

Livefade and fade hidden

HTML

<p class="demo-label">Fade</p>
<oc-expander-v1 variant="text-primary" cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>
<p class="demo-label">Fade hidden (hide-fade)</p>
<oc-expander-v1 variant="text-primary" hide-fade cutoff-height="100" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Der Kapuzenpullover aus weicher Bio-Baumwolle hält dich an kühlen Tagen warm. Die Kängurutasche bietet Platz für Handy und Schlüssel, die Rippbündchen an Ärmeln und Saum sorgen für einen guten Sitz. Der Stoff ist angeraut und dadurch besonders kuschelig. Das Material ist pflegeleicht und bei 30 Grad in der Maschine waschbar. Unser Model ist 1,86 m groß und trägt Größe M. Tipp: Der Pullover fällt normal aus. Wenn du es lieber locker magst, wähl eine Nummer größer. Kombinier ihn mit Jeans und Sneakern für einen entspannten Look im Alltag.</p></oc-expander-v1>

Content guidelines

When the expander is collapsed, the default label is "Mehr anzeigen" with a downwards pointing arrow icon. When the expander is expanded, the label is "Weniger anzeigen" with an upwards pointing arrow icon. Both labels can be edited. Use specific labels when useful, e.g. “Weitere Details anzeigen”, “Alle Bewertungen anzeigen”. You can truncate any type of content with the expander, such as text or rows.

Best practices

DoUse the expander to provide additional content like more product details.

Produkt

In den Warenkorb legen

Don'tUse the expander to truncate relevant content, for example primary buttons.

DoShow the beginning of the truncated content.

Don'tHide the truncated content completely or place it before the truncated content.

DoUse on canvas background.

Don'tUse on a background other than canvas, as the fade uses the canvas color to hide content.

Damenmode

Herrenmode

Kindermode

Schuhe

Sport

Wäsche

CautionBe cautious when using use text expander for rows. The layout may be odd if the rows use icons on the right. For rows without icons this solution may be valid.

Don'tUse row expander for text content. The affordance icon may easily be overseen.

Don'tUse expander without outer spacing. The usual grid spacing of 16px shall be applied.

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Note: For full technical documentation of this component, visitStorybook/expander.

Live demo

Produktbeschreibung

Dieser Sessel bringt Ruhe in dein Wohnzimmer. Die Sitzschale aus geformtem Holz ist mit einem weichen Bouclé-Stoff bezogen, der sich angenehm warm anfühlt. Die breiten Armlehnen laden dazu ein, mit einem Buch und einer Tasse Tee zu versinken. Dank der kompakten Maße passt er auch in kleinere Räume. Die Füße aus massiver Eiche sind geölt und schützen deinen Boden mit Filzgleitern. Der Bezug ist abnehmbar und bei 30 Grad waschbar.

Details

MaterialBouclé, 100 % Polyester

GestellEiche massiv, geölt

Maße (B × T × H)78 × 82 × 74 cm

Sitzhöhe42 cm

Belastbarkeitbis 120 kg

PflegeBezug waschbar bei 30 °C

Lieferungvormontiert, Füße anschrauben

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:12px;padding:20px 16px 8px">
  <p class="oc-headline-200" style="margin:0">Produktbeschreibung</p>
  <oc-expander-v1 variant="text-primary" cutoff-height="120" oc-aria-label="Produktbeschreibung"><p class="oc-copy-100">Dieser Sessel bringt Ruhe in dein Wohnzimmer. Die Sitzschale aus geformtem Holz ist mit einem weichen Bouclé-Stoff bezogen, der sich angenehm warm anfühlt. Die breiten Armlehnen laden dazu ein, mit einem Buch und einer Tasse Tee zu versinken. Dank der kompakten Maße passt er auch in kleinere Räume. Die Füße aus massiver Eiche sind geölt und schützen deinen Boden mit Filzgleitern. Der Bezug ist abnehmbar und bei 30 Grad waschbar.</p></oc-expander-v1>
  <p class="oc-headline-200" style="margin:16px 0 0">Details</p>
  <oc-expander-v1 variant="row-primary" cutoff-height="192" hide-fade oc-aria-label="Produktdetails">
    <oc-row-v2 variant="two-columns" hide-divider><span slot="column-label">Material</span><span slot="column-text">Bouclé, 100 % Polyester</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Gestell</span><span slot="column-text">Eiche massiv, geölt</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Maße (B × T × H)</span><span slot="column-text">78 × 82 × 74 cm</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Sitzhöhe</span><span slot="column-text">42 cm</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Belastbarkeit</span><span slot="column-text">bis 120 kg</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Pflege</span><span slot="column-text">Bezug waschbar bei 30 °C</span></oc-row-v2>
    <oc-row-v2 variant="two-columns"><span slot="column-label">Lieferung</span><span slot="column-text">vormontiert, Füße anschrauben</span></oc-row-v2>
  </oc-expander-v1>

Code

Version	Tag	Status	API
v1	`<oc-expander-v1>`	Stable, allowed for generation	ExpanderV1

Overview (v1)

The expander component can be used to display long texts by initially truncating them to provide better clarity on the page. The user can then expand and collapse the content using a link. It can be configured to text or row variant (determines the icon/trigger text layout), be expanded, and hide the fade gradient.

Default variation

Label

Label with Hyperlink

HTML

<oc-expander-v1 oc-aria-label="example content" variant="row">
<oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div><a href="#">Label with Hyperlink</a></div>
      </oc-row-v2>
</oc-expander-v1>

Configuration

The expander component offers a two styling variants with text and row. 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 expander 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 Expander UX documentation for detailed user experience guidelines.

Accessibility

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

Use `oc-aria-label`

To make the expander recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Behavior

The trigger that shows and hides the content has the 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". These attributes care so the users are not interrupted by a large content block they may not be interested in. The oc-aria-label attribute helps the screen reader decide whether the content should be skipped.

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

n	Shortcut	Description
Tab	Focuses the trigger
Space / Enter	(While focused) Toggles the trigger to open or close the expander

Configuration (v1)

Expander configuration

Configure the expander 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.

Label

Label with Hyperlink

HTML

<oc-expander-v1 oc-aria-label="example content" variant="row">
<oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div><a href="#">Label with Hyperlink</a></div>
      </oc-row-v2>
</oc-expander-v1>

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

API v1

Expander v1 API

API: `<oc-expander-v1>` (ExpanderV1)

Version 1 of the expander component.

Attributes / properties

Attribute	Type	Default	Required	Description
`variant`	`"text" \| "row" \| "row-primary" \| "row-secondary" \| "text-primary" \| "text-secondary"`	`"row-primary"`	no	Sets the variant of the expander. Deprecated values: - `"row"` - use `"row-primary"` or `"row-secondary"` instead - `"text"` - use `"text-primary"` or `"text-secondary"` instead
`hide-fade`	`boolean`	`false`	no	When `true`, the expander hides the fade gradient. When `false`, the expander shows the fade gradient.
`expanded`	`boolean`	`false`	no	When `true`, the expander grows to show all of its content. When `false`, the expander will not exceed its initial height.
`overflows`	`boolean`		no	Indicsates if the expander is closed and the expander's content size is larger than the cutoff height. Meaning that the expander's content overflows. This property is readonly And is automatically recalculated when the expander is opened or closed.
`is-cut-off`	`boolean`		no	Indicates if the expander is open and the expander's content size is larger than the cutoff height.
`cutoff-height`	`number`	`"150"`	no	Sets the cutoff height of the expander. Meaning how much content is shown when the expander is closed. The default value is 150px.
`oc-aria-label`	`string`		yes	aria label used on the section to describe the content to screen readers

Slots

Slot	Required	Description
`default`	yes	The content of the expander.
`show-less-text`	no	Sets a custom text to replace the content of the toggle button when the expander is expanded. Example: `<span slot="show-less-text">Weniger Informationen</span>`
`show-more-text`	no	Sets a custom text to replace the content of the toggle button when the expander is collapsed. Example: `<span slot="show-more-text">Mehr Informationen</span>`

Events

Event	Detail type	Description
`oc-expander-open`	`CustomEvent<Pick<Props, "hideFade" \| "variant">>`	Dispatched every time the user clicks the expander toggle button, causing the expander to open. But before the actual opening happens. May be cancleled to prevent the expander from opening.
`oc-open`	`CustomEvent<Pick<Props, "hideFade" \| "variant">>`	Dispatched every time the user clicks the expander toggle button, causing the expander to open. But before the actual opening happens. May be cancleled to prevent the expander from opening.
`oc-expander-close`	`CustomEvent<Pick<Props, "hideFade" \| "variant">>`	Dispatched every time the user clicks the expander toggle button, causing the expander to close. But before the actual closing happens. May be cancleled to prevent the expander from closing.
`oc-close`	`CustomEvent<Pick<Props, "hideFade" \| "variant">>`	Dispatched every time the user clicks the expander toggle button, causing the expander to close. But before the actual closing happens. May be cancleled to prevent the expander from closing.
`oc-expander-content-overflow-change`	`CustomEvent<Pick<Props, "overflows" \| "cutoffHeight">>`	Dispatched when the content overflow state changes. This may happen Every time the exapnder component is opened or closed.
`oc-content-overflow-change`	`CustomEvent<Pick<Props, "overflows" \| "cutoffHeight">>`	Dispatched when the content overflow state changes. This may happen Every time the exapnder component is opened or closed.
`oc-property-change`	`OcExpanderV1Events["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.

CSS custom properties

Custom property	Default	Description
`--background-color`	`undefined`	Sets a custom background color through a CSS variable. Note: The preferred way of using colors is via design tokens instead of hex values.
`--show-more-spacing-x`	`undefined`	Sets a custom horizontal spacing for the shore more button through a CSS variable.

Variations (v1)

Variations

Listed below are the most common variations of the expander 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-expander-variations--default · tags:

The default behavior of the expander. If the height of the text is more than the configured cutoff height (default: 150px), it will be cut off.

Args: oc-aria-label=example content, variant=row, defaultSlot=(see snippet)

Label

Label with Hyperlink

HTML

<oc-expander-v1 oc-aria-label="example content" variant="row">
<oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div><a href="#">Label with Hyperlink</a></div>
      </oc-row-v2>
</oc-expander-v1>

No cutoff

Story: components-expander-variations--no-cut-off · tags:

No cut off for content smaller than the configured cutoff height (default: 150px).

Args: variant=row, defaultSlot=(see snippet)

For content smaller than the configured cutoff height (default: 150px) there is nothing to expand and thus no expand toggle visible.

HTML

<oc-expander-v1 variant="row">
<p class="oc-copy-100">
      For content smaller than the configured cutoff height (default: 150px) there is nothing to expand and thus no expand toggle visible.
    </p>
</oc-expander-v1>

Custom cutoff height

Story: components-expander-variations--custom-cutoff-height · tags:

Cutoff height can be set to a custom value.

Args: variant=text, cutoff-height=300, oc-aria-label=example content, defaultSlot=(see snippet)

Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.

HTML

<oc-expander-v1 variant="text" cutoff-height="300" oc-aria-label="example content">
<p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
</oc-expander-v1>

Custom toggle text

Story: components-expander-variations--custom-toggle-text · tags:

You can configure the toggle button to display custom text using the slots "show-more-text" and "show-less-text".

Args: variant=row, defaultSlot=(see snippet), showMoreTextSlot=<span slot='show-more-text'>Mehr Informationen</span>, showLessTextSlot=<span slot='show-less-text'>Weniger Informationen</span>

Mehr Informationen Weniger Informationen

Label

HTML

<oc-expander-v1 variant="row">
<span slot='show-more-text'>Mehr Informationen</span>
<span slot='show-less-text'>Weniger Informationen</span>
<oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label</div>
      </oc-row-v2>
</oc-expander-v1>

Demo: text expander

Story: components-expander-variations--demo-text-expander · tags:

Demo showcasing an expandable navigation list aka a table expander.

Args: variant=text, oc-aria-label=example content, defaultSlot=(see snippet)

HTML

<oc-expander-v1 variant="text" oc-aria-label="example content">
<p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
    <p class="oc-copy-100">
      Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
    </p>
</oc-expander-v1>

Demo: text expander variants

Story: components-expander-variations--demo-text-expander-variants · tags:

Demo showcasing all expander variants (row, row-primary, row-secondary, text, text-primary, text-secondary) for QA testing.

<div style="display: grid; gap: 2rem;">
  <div>
    <h2 class="oc-headline-200">Row Variant (Legacy)</h2>
    <oc-expander-v1 variant="row" oc-aria-label="row variant expander">
      ${unsafeHTML(sampleRowContent)}
    </oc-expander-v1>
  </div>

  <div>
    <h2 class="oc-headline-200">Row Primary</h2>
    <oc-expander-v1 variant="row-primary" oc-aria-label="row primary expander">
      ${unsafeHTML(sampleRowContent)}
    </oc-expander-v1>
  </div>

  <div>
    <h2 class="oc-headline-200">Row Secondary</h2>
    <oc-expander-v1 variant="row-secondary" oc-aria-label="row secondary expander">
      ${unsafeHTML(sampleRowContent)}
    </oc-expander-v1>
  </div>

  <div>
    <h2 class="oc-headline-200">Text Variant (Legacy)</h2>
    <oc-expander-v1 variant="text" oc-aria-label="text variant expander">
      ${unsafeHTML(sampleTextContent)}
    </oc-expander-v1>
  </div>

  <div>
    <h2 class="oc-headline-200">Text Primary</h2>
    <oc-expander-v1 variant="text-primary" oc-aria-label="text primary expander">
      ${unsafeHTML(sampleTextContent)}
    </oc-expander-v1>
  </div>

  <div>
    <h2 class="oc-headline-200">Text Secondary</h2>
    <oc-expander-v1 variant="text-secondary" oc-aria-label="text secondary expander">
      ${unsafeHTML(sampleTextContent)}
    </oc-expander-v1>
  </div>
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: text expander variants",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    }
  },
  render() {
    const sampleRowContent = `
      <oc-row-v2>
        <div>Label 1</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label 2</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label 3</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label 4</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label 5</div>
      </oc-row-v2>
      <oc-row-v2>
        <div>Label 6</div>
      </oc-row-v2>
    `;
    const sampleTextContent = `
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
      <p class="oc-copy-100">
        Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
      </p>
    `;
    return html`
      <div style="display: grid; gap: 2rem;">
        <div>
          <h2 class="oc-headline-200">Row Variant (Legacy)</h2>
          <oc-expander-v1 variant="row" oc-aria-label="row variant expander">
            ${unsafeHTML(sampleRowContent)}
          </oc-expander-v1>
        </div>

        <div>
          <h2 class="oc-headline-200">Row Primary</h2>
          <oc-expander-v1 variant="row-primary" oc-aria-label="row primary expander">
            ${unsafeHTML(sampleRowContent)}
          </oc-expander-v1>
        </div>

        <div>
          <h2 class="oc-headline-200">Row Secondary</h2>
          <oc-expander-v1 variant="row-secondary" oc-aria-label="row secondary expander">
            ${unsafeHTML(sampleRowContent)}
          </oc-expander-v1>
        </div>

        <div>
          <h2 class="oc-headline-200">Text Variant (Legacy)</h2>
          <oc-expander-v1 variant="text" oc-aria-label="text variant expander">
            ${unsafeHTML(sampleTextContent)}
          </oc-expander-v1>
        </div>

        <div>
          <h2 class="oc-headline-200">Text Primary</h2>
          <oc-expander-v1 variant="text-primary" oc-aria-label="text primary expander">
            ${unsafeHTML(sampleTextContent)}
          </oc-expander-v1>
        </div>

        <div>
          <h2 class="oc-headline-200">Text Secondary</h2>
          <oc-expander-v1 variant="text-secondary" oc-aria-label="text secondary expander">
            ${unsafeHTML(sampleTextContent)}
          </oc-expander-v1>
        </div>
      </div>
    `;
  }
}

Demo: text expander scroll target

Story: components-expander-variations--demo-text-expander-scroll-target · tags:

Demo showcasing an expandable navigation list aka a table expander.

Args: variant=text, oc-aria-label=example content, defaultSlot=(see snippet)

<h1>This is a heading</h1>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<oc-expander-v1 variant="text" oc-aria-label="example content">
  ${unsafeHTML(content)} ${unsafeHTML(showMoreTextSlot)} ${unsafeHTML(showMoreTextSlot)}
</oc-expander-v1>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
  aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
  mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
  tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
  doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
  veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
  perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
  perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
  voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
</p>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: text expander scroll target",
  parameters: {
    controls: {
      disabled: true
    }
  },
  args: {
    variant: "text",
    "oc-aria-label": "example content",
    defaultSlot: `\
    ${Array.from({
      length: 30
    }, () => `
    <p class="oc-copy-100">Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus. Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.</p>`).join("")}
    `
  },
  render(args) {
    const {
      defaultSlot: content,
      showMoreTextSlot,
      ...props
    } = args;
    return html`
      <h1>This is a heading</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <oc-expander-v1 ${spread(props)}>
        ${unsafeHTML(content)} ${unsafeHTML(showMoreTextSlot)} ${unsafeHTML(showMoreTextSlot)}
      </oc-expander-v1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quidem vel voluptatibus,
        aliquid impedit fugit sapiente praesentium quo at est? Asperiores fugit repellendus,
        mollitia provident nostrum at ipsum! Fuga consequuntur vitae exercitationem! Praesentium eum
        tempora quaerat unde maxime odio nemo dicta consectetur, nisi vitae quibusdam ut debitis
        doloremque iusto quidem similique dignissimos ratione adipisci error sint? At aspernatur cum
        veritatis deleniti, quaerat laudantium sit qui, aliquam, possimus esse praesentium
        perspiciatis labore exercitationem sunt laborum numquam placeat dignissimos? Libero ut
        perferendis ullam illo vero dolorum ducimus dolore molestias modi aliquam officia doloremque
        voluptatem non excepturi facere, id, quam consequuntur dolores consequatur.
      </p>
    `;
  }
}

Demo: expand only hidden elements

Story: components-expander-variations--demo-expand-only-hidden-elements · tags:

Demo showcasing a common use case with split interactive elements.

Interaktion 1

Interaktion 2

Interaktion 3

Interaktion 4

Interaktion 5

Interaktion 6

Interaktion 7

Interaktion 8

HTML

<oc-block-v2 style="max-width: 400px;">
<oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 1</oc-row-v2>
<oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 2</oc-row-v2>
<oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 3</oc-row-v2>
<oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 4</oc-row-v2>
<oc-expander-v1 variant="row" hide-fade cutoff-height="0" oc-aria-label="Weitere">
  <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 5</oc-row-v2>
  <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 6</oc-row-v2>
  <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 7</oc-row-v2>
  <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 8</oc-row-v2>
</oc-expander-v1>
</oc-block-v2>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: expand only hidden elements",
  parameters: {
    controls: {
      disabled: true
    }
  },
  render() {
    return html`
      <oc-block-v2 style="max-width: 400px;">
        <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 1</oc-row-v2>
        <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 2</oc-row-v2>
        <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 3</oc-row-v2>
        <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 4</oc-row-v2>

        <oc-expander-v1 variant="row" hide-fade cutoff-height="0" oc-aria-label="Weitere">
          <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 5</oc-row-v2>
          <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 6</oc-row-v2>
          <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 7</oc-row-v2>
          <oc-row-v2 as-button icon-right="arrow-long-right">Interaktion 8</oc-row-v2>
        </oc-expander-v1>
      </oc-block-v2>
    `;
  }
}

Interaction tests (ExpanderV1.interactions.stories.ts)

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

Expand On Button Click

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

Expand On Fade Click

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

Collapse On Click

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

Configurator

Usage

Anatomy

Variants

Behavior

States

Interaction

Animation

Fitting

Placement

Content guidelines

Best practices

Accessibility

Status

Implementation

Live demo

Code

Overview (v1)

Expander

Default variation

Configuration

Usage guidelines

Accessibility

Use oc-aria-label

Behavior

Keyboard navigation

Further reading

Configuration (v1)

Expander configuration

API v1

Expander v1 API

API: <oc-expander-v1> (ExpanderV1)

Attributes / properties

Slots

Events

CSS custom properties

Variations (v1)

Variations

Default

No cutoff

Custom cutoff height

Custom toggle text

Demo: text expander

Demo: text expander variants

Demo: text expander scroll target

Demo: expand only hidden elements

Interaction tests (ExpanderV1.interactions.stories.ts)

Expand On Button Click

Expand On Fade Click

Collapse On Click

Use `oc-aria-label`

API: `<oc-expander-v1>` (ExpanderV1)