sp-accordion-item

Item 1
Item 2

This is content that has alink back to Spectrum Web Componentsso that it is easy to test that "Space" and "Enter" interactions on focusable content does NOT toggle the Accordion Item.

open true false
allowMultiple true false
density Compact Spacious Default
size Small Medium Large Extra large
Examples API

Description #

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.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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

Example #

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

Opened #

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

Disabled #

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

Events #

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.