4.67.0

Accordion (stacked)

Toggle the display of a stacked section of expandable content

Demo

API

Tag

Name Description
<s-accordion-stacked> Custom tag accepts three slots: one each for title text, accessories, and a sub-heading

Slots

Name Required Description
title

Title content. Use a div with a text utility class (e.g. class="text-md-regular block") rather than a heading tag — heading levels must not skip in the page outline, so the right level depends on context.

title-accessory

    Optional accessories like badge, tag and icon.

sub-heading

    Optional sub-heading: Used to provide additional context or details below the title.

Attributes

Name Detail Description
open attribute

When present, expands the accordion's content area.

Events

Name Detail Description
s-toggle The accordion's oldState and newState are available on e.detail

Fired when the accordion is toggled.

Demo

API

Tag

Name
<SAccordionStacked>

Slots

Name Required Description
title

Title content. Use a div with a text utility class (e.g. class="text-md-regular block") rather than a heading tag — heading levels must not skip in the page outline, so the right level depends on context.

title-accessory

    Optional accessories like badge, tag and icon.

sub-heading

    Optional sub-heading: Used to provide additional context or details below the title.

Props

Name Value Required Description
open attribute

When present, expands the accordion's content area.

Skylab React links

General information about using our React package

Typescript

Guidelines

All s-accordion-stacked components representing same set of data should be grouped together inside <div class='accordion-container'>

If there are multiple groups of stack accordions on page, each set should be grouped together in div having class 'accordion-container' as shown in demo

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com