An accordion container that groups collapsible panels for progressive content disclosure. Renders as semantic `<dl>` element with accordion-panel children. Panels can be independently toggled open/closed with smooth height animations. Only the active panel is expanded; clicking another panel closes the previously active one. Use accordions to: - Organize large content sections (FAQs, product features, documentation) - Show/hide detailed information progressively - Create expandable content lists with clear interactions - Group related information hierarchically Each accordion-panel contains: - A header slot with the panel title (rendered in a button trigger) - Default slot content that expands/collapses
| Name | Type | Default | Description |
|---|---|---|---|
inverted |
Boolean |
boolean |
An accordion container that groups collapsible panels for progressive content disclosure. Renders as semantic `<dl>` element with accordion-panel children. Panels can be independently toggled open/closed with smooth height animations. Only the active panel is expanded; clicking another panel closes the previously active one. Use accordions to: - Organize large content sections (FAQs, product features, documentation) - Show/hide detailed information progressively - Create expandable content lists with clear interactions - Group related information hierarchically Each accordion-panel contains: - A header slot with the panel title (rendered in a button trigger) - Default slot content that expands/collapses / export class EdAccordion extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Inverted variant 1) Used for dark backgrounds |
| Name | Description |
|---|---|
- |
Accordion panels (ed-accordion-panel elements) |
Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.
packages/eddie-web-components/components/accordion/accordion.ts