Svelte Component

Accordions

Divide content into collapsible sections.

typescript 
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA Transitions

Demo

While Halloween and Day of the Dead occur nearly in tandem and share similar customs (candy, face painting, and community gathering), the two are not related. Halloween has ancient Celtic roots, while Day of the Dead has its own origins that date back to the Indigenous people of Mexico and Central America.

Auto-Collapse Mode

Enable the autocollapse setting to limit display to one accordion panel at a time.

While Halloween and Day of the Dead occur nearly in tandem and share similar customs (candy, face painting, and community gathering), the two are not related. Halloween has ancient Celtic roots, while Day of the Dead has its own origins that date back to the Indigenous people of Mexico and Central America.

Open on Load

Set the visible items on load with open. When using autocollapse mode, this is limited to a single item.

html 
<AccordionItem open>...</AccordionItem>

Custom Icons

Set the iconOpen and iconClosed slots within the Accordion Item component.