Accordion Item
Accordion items are used inside <wa-accordion> to create expandable sections with accessible headers.
This component must be used as a child of <wa-accordion>. Please see the Accordion docs to see examples of this component in action.
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/accordion-item/accordion-item.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/accordion-item/accordion-item.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/accordion-item/accordion-item.js';
To import this component for React 18 or below, use the following code:
import WaAccordionItem from '@awesome.me/webawesome/dist/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 <wa-icon>. |
label
|
The accordion item's label. Alternatively, use the label attribute. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
disableddisabled |
Disables the accordion item so it can't be toggled.
Type
boolean
Default
false
|
|
expandedexpanded |
Expands the accordion item.
Type
boolean
Default
false
|
|
labellabel |
The text label shown in the header. If you need HTML, use the
label slot instead.
Type
string
Default
''
|
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
|
toggle() |
Toggles the accordion item's expanded state. |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--easing |
The easing of the expand/collapse animation.
Default
var(--wa-transition-easing)
|
--hide-duration |
The duration of the collapse animation.
Default
var(--wa-transition-normal)
|
--show-duration |
The duration of the expand animation.
Default
var(--wa-transition-normal)
|
--spacing |
The amount of space around and between the item's header and content.
Default
var(--wa-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 |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
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, will also be included in this list.