@isoftdata/svelte-accordion

Svelte Accordion Component

Svelte wrapper around the Bootstrap Accordion component.

Install

pnpm i @isoftdata/svelte-accordion

Just need to have a single card that's collapsible? Use the Card component instead.

Components

Accordion

The parent container for accordion items. Manages which item is expanded and ensures only one item can be expanded at a time.

Props

Name	Type	Description	Default Value
expandedId	string	ID of the currently expanded accordion item	''
class	ClassValue	CSS Classes to apply to the accordion div	''

Snippets

• children(default) - the body of the accordion

AccordionItem

Individual accordion items that can be expanded or collapsed.

Props

Name	Type	Description	Default Value
id	string	Unique identifier for the accordion item	required
header	string | Snippet	Text to display in the accordion header	''
children	Snippet	Content to display when the accordion item is expanded	undefined
class	ClassValue	CSS classes to apply to the accordion item div	''
headerClass	ClassValue	CSS classes to apply to the header	''
buttonClass	ClassValue	CSS classes to apply to the button	''
bodyClass	ClassValue	CSS classes to apply to the body	''

Snippets

• children(default) - the body of the accordion item
• header - The header of the accordion item

Example

<script lang="ts">
	import { Accordion, AccordionItem } from '@isoftdata/svelte-accordion'

	let expandedId = $state('2')
</script>

<Accordion bind:expandedId>
	<AccordionItem
		id="1"
		header="Accordion Item #1"
	>
		Content for the first accordion item.
	</AccordionItem>

	<AccordionItem
		id="2"
		header="Accordion Item #2"
	>
		Content for the second accordion item.
	</AccordionItem>

	<AccordionItem id="3">
		{#snippet header()}
			<h1>Accordion Item #3, but larger</h1>
		{/snippet}
		Content for the third accordion item.
	</AccordionItem>
</Accordion>