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 multiplebooleanfalseAllow multiple panels to be open simultaneously valuestring''Comma-separated list of open item IDs
el-dm-accordion-item
Property Type Default Description valuestring''Unique identifier for this item disabledbooleanfalseWhether the item is disabled openbooleanfalseWhether 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 headerContent 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 containerThe accordion container
el-dm-accordion-item
Part Description headerThe header button iconThe chevron icon contentThe 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