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.

Getting Started

Create an accordion and add as many child item as you wish.

html 
<Accordion>
	<AccordionItem open>
		<svelte:fragment slot="lead">(lead)</svelte:fragment>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
	<AccordionItem>
		<svelte:fragment slot="lead">(lead)</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 Item Behavior

If autocollapse is disabled, you can set open to any items-center you wish to be open by default. If autocollapse is enabled, the last item with the open prop will be open by default.

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