Svelte Component

Accordions

Divide content into collapsible sections.

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

Demo

This is the content panel for the books item.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eligendi quibusdam odit, temporibus ullam ab enim expedita eum officia ipsum, laboriosam, nobis quasi laborum aspernatur reiciendis dignissimos optio sunt distinctio.

Auto-Collapse Mode

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

html 
<Accordion autocollapse>...</Accordion>

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>