shadow
The Accordion element allows you to view the contents in drop-down sections. Each section can be expanded or collapsed with a click, allowing users to quickly find and view the information they want. The component supports multiple selection, which means that multiple sections can be expanded at once. In addition, it allows you to set the initial index of the expanded section, which provides flexibility when initializing a component with default expanded content.
Use wje-accordion when you need a consistent WebJET-based implementation for this UI concern.
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
| Description | Allows multiple accordion items to be expanded at the same time. |
| Attribute | multiple |
| Type | boolean |
| Default | - |
| Description | Sets the index of the currently active accordion item. |
| Attribute | index |
| Type | number |
| Default | - |
| Description | Disables user interaction with accordion items. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
| Description | Controls whether the accordion item is expanded. |
| Attribute | expanded |
| Type | boolean |
| Default | - |
| Name | Description |
|---|
wje-accordion-item:open | Emitted when the component is opened. |
| Description | Method to run after the element is drawn. |
| Signature | (exception: any) => void |
| Description | Method to get the accordions. |
| Signature | () => Array |
No CSS shadow parts available for this component.
No CSS custom properties available for this component.
| Name | Description |
|---|
default | Default slot for the main component content. |