Accordions

Svelte Component

Divide content into collapsible sections.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Icon Heading

The content for the first element.

The content for the second element.

The content for the third element.

Getting Started

A standard AccordionGroup that only allows one AccordionItem to be open at once.

html 
<AccordionGroup>
	<!-- Open -->
	<AccordionItem open>
		<svelte:fragment slot="lead">(lead)</svelte:fragment>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
	<!-- Closed -->
	<AccordionItem>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
</AccordionGroup>

Using Collapse

If you do not wish for the AccordionItem, set the collapse property to false.

html 
<AccordionGroup collapse={false}>
	<!-- Open -->
	<AccordionItem open>
		<svelte:fragment slot="lead">(lead)</svelte:fragment>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
	<!-- Closed -->
	<AccordionItem>
		<svelte:fragment slot="summary">(summary)</svelte:fragment>
		<svelte:fragment slot="content">(content)</svelte:fragment>
	</AccordionItem>
</AccordionGroup>