Learn how to create an accordion

useAccordion is a state hook from lapikit/actions that manages the open/close state of a kit:accordion. It returns a reactive values array and a toggle function to wire up to your accordion items.

import { useAccordion } from 'lapikit/actions';

const accordion = useAccordion();

Guide and overview

kit:accordion is a controlled component - it has no internal state. useAccordion is the companion hook that handles it. It exposes:

• values - a reactive array of currently open indices (string | number)
• toggle(id) - opens the item if closed, closes it if already open

Pass accordion.values.includes(index) to each item’s open prop, and accordion.toggle to its toggle prop.

Configure useAccordion options

Returned values and methods

Usage example: multiple accordion mode

<script>
	import { useAccordion } from 'lapikit/actions';

	const accordion = useAccordion({ multiple: true });

	const items = [
		{
			index: '1',
			title: 'Design tokens',
			content:
				'Lapikit uses CSS custom properties for colors, spacing, and radius - making theming straightforward.'
		},
		{
			index: '2',
			title: 'Component preprocess',
			content:
				'The preprocessor transforms kit:* syntax into native Svelte components at build time, with zero runtime overhead.'
		},
		{
			index: '3',
			title: 'SvelteKit integration',
			content:
				'Lapikit is designed to work with SvelteKit layouts. Place kit:app in your root +layout.svelte to cover the whole app.'
		}
	];
</script>

<kit:accordion spacer>
	{#each items as item (item)}
		<kit:accordion-item
			index={item.index}
			open={accordion.values.includes(item.index)}
			toggle={accordion.toggle}
			text={item.title}
		>
			{item.content}
		</kit:accordion-item>
	{/each}
</kit:accordion>

When to use useAccordion?

useAccordion is designed to manage the shared state of accordions across multiple components in Svelte applications.

It centralizes the logic used to:

• Open and close accordion elements
• Synchronize active states
• Handle one or more expanded sections
• And ensure predictable interactions between components

This hook is particularly useful when creating:

• Collapsible navigation menus
• FAQ sections
• Expandable layouts
• Settings panels
• Or reusable interfaces based on accordions.

By moving state management out of individual components, useAccordion simplifies and streamlines the maintenance of interactions in Svelte and SvelteKit projects.

It works with Lapikit Accordion components and follows the same reactive patterns as the rest of the library.

For the full list of props, snippets, and usage examples, see the kit:accordion component page component page.