Accordion

An interactive set of panels that hide and reveal sections.

<script lang="ts">
	import { Accordion, AccordionButton, AccordionContent, AccordionHeading, AccordionItem } from 'lithesome';
	import { ChevronRightIcon } from 'lucide-svelte';
	import { cn } from '$site/index.js';
	import { slide } from 'svelte/transition';

	const items = [
		{
			title: 'What is Lithesome?',
			content:
				'Lithesome is a collection of unstyled Svelte 5 components that take care of all the functionality, leaving the visual design to you.',
			value: 'what-is-lithesome'
		},
		{ title: 'Is it good?', content: 'Well... Maybe... Idk...', value: 'is-it-good' },
		{ title: 'Is Svelte 5 good?', content: 'YES!', value: 'is-svelte5-good' }
	];

	let value = $state<string[]>(['what-is-lithesome']);
</script>

<Accordion single class="w-full max-w-[70%]" bind:value>
	{#each items as { title, content, value }}
		<AccordionItem {value} class="border-b border-neutral-300 last:border-none dark:border-white/10">
			<AccordionHeading>
				<AccordionButton
					class="flex w-full items-center justify-between gap-4 p-4 hover:text-black dark:hover:text-white"
				>
					{#snippet children({ active })}
						{title}
						<ChevronRightIcon class={cn('h-6 w-6 transition-transform', active ? 'rotate-90' : '')} />
					{/snippet}
				</AccordionButton>
			</AccordionHeading>
			<AccordionContent transition={[slide, { duration: 150 }]} class={() => cn('px-4 pb-4')}>
				{content}
			</AccordionContent>
		</AccordionItem>
	{/each}
</Accordion>

API Reference

Accordion

The base component that manages and controls state.

Prop	Type	Description
`value`	`string[]` `Default: []`	Get the currently opened items or set them programmatically. If items have no value set, the unique ID will be used.
`single`	`boolean` `Default: false`	Allow only 1 to be opened at a given time.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`active`	`boolean`	Display whether any item is active.

Data attribute	Value	Description
`data-accordion`	`''`	The base data attribute, can be used for styling.

AccordionItem

This component is a child of Accordion

Prop	Type	Description
`value`	`string` `Default: ——`	The value of the item. If no value is set, unique ID is used.
`disabled`	`boolean` `Default: false`	Disables the item, disallowing it from opening.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`active`	`boolean`	Display whether the item is active.

Data attribute	Value	Description
`data-accordionitem`	`''`	The base data attribute, can be used for styling.
`data-active`	`boolean`	Applied if any item is active.

AccordionHeading

This component is a child of AccordionItem

Prop	Type	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6` `Default: 3`	The heading level to use for the header. This will be set as the aria-level attribute.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-accordionheading`	`''`	The base data attribute, can be used for styling.

AccordionButton

This component is a child of AccordionHeading

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`active`	`boolean`	Display whether the item is active.
`disabled`	`boolean`	Disables the button if the has the disabled prop.

Data attribute	Value	Description
`data-accordionbutton`	`''`	The base data attribute, can be used for styling.
`data-active`	`boolean`	Applied if the current item is active.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

AccordionContent

This component is a child of Accordion

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.

Child prop	Type	Description
`active`	`boolean`	Display whether the item is active.

Data attribute	Value	Description
`data-accordioncontent`	`''`	The base data attribute, can be used for styling.
`data-active`	`true`	Applied if the current item is active.

Basic Example

<script>
	import { Accordion, AccordionButton, AccordionContent, AccordionHeading, AccordionItem } from 'lithesome';
</script>

<Accordion>
	<AccordionItem>
		<AccordionHeading>
			<AccordionButton>Item 1</AccordionButton>
		</AccordionHeading/>
		<AccordionContent>Item 1 content</AccordionContent>
	</AccordionItem>
	<AccordionItem>
		<AccordionHeading>
			<AccordionButton>Item 2</AccordionButton>
		</AccordionHeading/>
		<AccordionContent>Item 2 content</AccordionContent>
	</AccordionItem>
</Accordion>

Disabling an item

By passing the disabled prop, it will disable the item. Disallowing the opening and skipped over via keyboard navigation.

<AccordionItem disabled>
	<!-- code here... -->
</AccordionItem>

Allowing a single item opened

If you wish to only allow one <AccordionItem /> to be opened at a give time, pass the single prop to the <Accordion /> component.

<Accordion single>
	<!-- code here... -->
</Accordion>