Svelte Component

Accordions

Divide content into collapsible sections.

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

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.

html 
<Accordion>
	<AccordionItem open>
		<svelte:fragment slot="lead">(icon)</svelte:fragment>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
	<AccordionItem>
		<svelte:fragment slot="lead">(icon)</svelte:fragment>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
	<!-- ... -->
</Accordion>

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>