Accordion - Skeleton

Default

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	const value = $state(['club']);
</script>

<Accordion {value}>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Collapsible

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const value = $state(['club']);
</script>

<Accordion {value} collapsible>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Multiple

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const value = $state(['club']);
</script>

<Accordion {value} multiple>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Open State

Each Item id added to the Accordion value array will be open by default.

State Rune

const value = $state(['club']);

<Accordion value={value}>...</Accordion>

Harcoded

<Accordion value={['club']}>...</Accordion>

Multiple Items

Use multiple to enable multiple items to be opened at once.

<Accordion multiple>...</Accordion>

Custom Icons

<script lang="ts">
  import Plus from 'lucide-svelte/icons/plus';
  import Minus from 'lucide-svelte/icons/minus';
  import Club from 'lucide-svelte/icons/club';
</script>

<Accordion>
    {#snippet iconOpen()}<Plus size={16} />{/snippet}
    {#snippet iconClosed()}<Minus size={16} />{/snippet}
    <!-- ... -->
  <AccordionItem id="club">
      {#snippet controlLead()}<Club size={24} />{/snippet}
      <!-- ... -->
  <AccordionItem>
</Accordion>

Default

Club −

Diamond +

Heart (disabled) +

Spade +

Collapsible

Club −

Diamond +

Heart (disabled) +

Spade +

Multiple

Club −

Diamond +

Heart (disabled) +

Spade +

Open State

State Rune

Harcoded

Multiple Items

Custom Icons