Expander

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

Overview (v1)

Source: ./src/components/expander/v1/Overview.mdx

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

Story Default:

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

Source: ./src/components/expander/v1/Configuration.mdx

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.

Story Default:

<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

Source: ./src/components/expander/v1/ExpanderV1.API.g.mdx

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)

Source: ./src/components/expander/v1/Variations.mdx

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)

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

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

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

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

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

<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

Expander

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

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)