Accordion

The Accordion component provides expandable/collapsible panels for organizing content into logical sections. Users can expand sections to reveal content while keeping other sections collapsed.

Installation

npm install @duskmoon-dev/el-accordion

Usage

import '@duskmoon-dev/el-accordion/register';

<el-dm-accordion>
  <el-dm-accordion-item value="item-1">
    <span slot="header">Section 1</span>
    <p>Content for section 1.</p>
  </el-dm-accordion-item>
  <el-dm-accordion-item value="item-2">
    <span slot="header">Section 2</span>
    <p>Content for section 2.</p>
  </el-dm-accordion-item>
</el-dm-accordion>

Live Demo

Accordion Demo

Features

This accordion supports smooth animations, keyboard navigation, and multiple expansion modes.

Usage

Simply wrap your content in accordion items and provide a unique value for each item.

Styling

Use CSS parts to customize the appearance of headers, content, and icons.

Multiple Expansion

Allow multiple panels to be open simultaneously:

Multiple Expansion

First Section

You can open multiple sections at once.

Second Section

This section can be open along with others.

Properties

el-dm-accordion

Property	Type	Default	Description
`multiple`	`boolean`	`false`	Allow multiple panels to be open simultaneously
`value`	`string`	`''`	Comma-separated list of open item IDs

el-dm-accordion-item

Property	Type	Default	Description
`value`	`string`	`''`	Unique identifier for this item
`disabled`	`boolean`	`false`	Whether the item is disabled
`open`	`boolean`	`false`	Whether the item is expanded

Methods

el-dm-accordion

Method	Description
`getOpenItems()`	Returns array of open item IDs
`setOpenItems(ids: string[])`	Set open items by ID array
`open(itemId: string)`	Open a specific item by ID
`close(itemId: string)`	Close a specific item by ID
`toggle(itemId: string)`	Toggle a specific item by ID

el-dm-accordion-item

Method	Description
`toggle()`	Toggle the item open/closed

Slots

el-dm-accordion

Slot	Description
default	Accordion items (el-dm-accordion-item elements)

el-dm-accordion-item

Slot	Description
`header`	Content for the header/trigger area
default	The expandable content

Events

el-dm-accordion

Event	Detail	Description
`change`	`{ value: string, openItems: string[] }`	Fired when expansion state changes

CSS Parts

el-dm-accordion

Part	Description
`container`	The accordion container

el-dm-accordion-item

Part	Description
`header`	The header button
`icon`	The chevron icon
`content`	The content container

Accessibility

Uses aria-expanded to indicate panel state
Uses aria-controls to associate headers with content
Uses aria-hidden on collapsed content
Keyboard navigation: Enter/Space to toggle panels
Headers are focusable buttons