Accordions

Svelte Component

Divide content into collapsible sections.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

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.

Getting Started

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>