Accordion Item
<cs-accordion-item>
Accordion items are used inside <cs-accordion> to create expandable sections with accessible headers.
This component must be used as a child of <cs-accordion>. Please see the Accordion docs to see examples of this component in action.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/accordion-item/accordion-item.js';
import './cornerstone/components/accordion-item/accordion-item.js';
import CsAccordionItem from '@cruglobal/cornerstone-components/react/accordion-item/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The accordion item's body content. |
icon | Optional expand/collapse icon. Works best with <cs-icon>. |
label | The accordion item's label. Alternatively, use the label attribute. |
Attributes & Properties
Learn more about attributes and properties.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
disabled | disabled | Disables the accordion item so it can't be toggled. | boolean | false | Yes |
expanded | expanded | Expands the accordion item. | boolean | false | Yes |
label | label | The text label shown in the header. If you need HTML, use the label slot instead. | string | '' | — |
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
collapse() | Collapses the accordion item with animation. | — |
expand() | Expands the accordion item with animation. | — |
focus() | Focuses the accordion item's trigger button. | options: FocusOptions |
handleExpandedChange() | Animates the body open or closed, then announces that the transition settled. The generation guard returns before dispatching on purpose: a superseded transition must not emit a completion event, or a consumer sees a collapse that never happened. rapid toggling > should only fire the final after event when the animation is interrupted holds that line. The cost is that expand()/collapse() resolve on these events and nothing else, so the superseded caller's promise is never settled here. That is bounded by the timeout in waitForEvent rather than by dispatching an event that would be a lie — see internal/event.ts. | — |
toggle() | Toggles the accordion item's expanded state. | — |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description | Default |
|---|---|---|
--easing | The easing of the expand/collapse animation. | var(--cs-transition-easing) |
--hide-duration | The duration of the collapse animation. | var(--cs-transition-normal) |
--show-duration | The duration of the expand animation. | var(--cs-transition-normal) |
--spacing | The amount of space around and between the item's header and content. | var(--cs-space-m) |
Custom States
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
animating | Applied while the panel is animating. | :state(animating) |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
accordion-item | The component's outer wrapper. | ::part(accordion-item) |
button | The trigger button that toggles the panel. | ::part(button) |
content | The content slot inside the panel. | ::part(content) |
heading | The heading element wrapping the trigger button. Omitted when heading-level="none". | ::part(heading) |
icon | The container that wraps the expand/collapse icon. | ::part(icon) |
label | The container that wraps the label. | ::part(label) |
panel | The panel that contains the item's content. | ::part(panel) |
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.