The <sp-accordion-item> element represents a single item in an <sp-accordion> parent element. Its label attribute and default slot content make up the "headline" and "body" of the toggleable content item.

yarn add @spectrum-web-components/accordion

Import the side effectful registration of <sp-accordion-item> via:

import '@spectrum-web-components/accordion/sp-accordion-item.js';

When looking to leverage the AccordionItem base class as a type and/or for extension purposes, do so via:

import { AccordionItem } from '@spectrum-web-components/accordion';

<sp-accordion>
    <sp-accordion-item label="Heading 1">
        <div>The content can be toggled visible.</div>
    </sp-accordion-item>
</sp-accordion>

<sp-accordion allow-multiple>
    <sp-accordion-item open label="Heading 2">
        <div>This content is visible by default.</div>
    </sp-accordion-item>
</sp-accordion>

<sp-accordion allow-multiple>
    <sp-accordion-item disabled label="Heading 2">
        <div>You can not toggle this content visible.</div>
    </sp-accordion-item>
</sp-accordion>

An <sp-accordion-item> element will dispatch sp-accordion-item-toggle events when it is opened or closed. By default, these events are dispatched to allow the parent <sp-accordion> to manage which of its item children can shot their children at any one time, consumers can also listen for this event and leverage event.target.open to ascertain the current state of the item dispatching item.

API