Disclosure

Accordion

Stacks sections so people can open only what they need.

Installation

npx sinaui add accordion

Copy the src/lib/ui/accordion/ folder, Icon.svelte and tokens.css.

Examples

Basic

Any number of sections can be open.

What was the House of Wisdom?

A library and translation center in Abbasid Baghdad, where scholars rendered Greek, Persian and Indian works into Arabic.

Who worked there?

Al-Khwarizmi, the Banu Musa brothers and Hunayn ibn Ishaq, among many others.

What became of it?

It was destroyed in the Mongol siege of Baghdad in 1258.

<script lang="ts">
	import * as Accordion from '#lib/ui/accordion/index.js';
</script>

<Accordion.Root>
	<Accordion.Item title="What was the House of Wisdom?">
		A library and translation center in Abbasid Baghdad, where scholars rendered Greek, Persian and
		Indian works into Arabic.
	</Accordion.Item>
	<Accordion.Item title="Who worked there?">
		Al-Khwarizmi, the Banu Musa brothers and Hunayn ibn Ishaq, among many others.
	</Accordion.Item>
	<Accordion.Item title="What became of it?">
		It was destroyed in the Mongol siege of Baghdad in 1258.
	</Accordion.Item>
</Accordion.Root>

One at a time

Opening a section closes the others, using the browser's own details grouping.

Algebra

From al-Khwarizmi's al-Jabr, about restoring and balancing equations.

Algorithm

From the Latin form of al-Khwarizmi's own name.

Alchemy

From Arabic al-kimiya, itself borrowed from Greek.

<script lang="ts">
	import * as Accordion from '#lib/ui/accordion/index.js';
</script>

<!-- One open at a time, using the browser's native <details name> grouping. -->
<Accordion.Root exclusive>
	<Accordion.Item title="Algebra" open>
		From al-Khwarizmi's al-Jabr, about restoring and balancing equations.
	</Accordion.Item>
	<Accordion.Item title="Algorithm">From the Latin form of al-Khwarizmi's own name.</Accordion.Item>
	<Accordion.Item title="Alchemy">
		From Arabic al-kimiya, itself borrowed from Greek.
	</Accordion.Item>
</Accordion.Root>

Props

Part	Props
`Accordion.Root`	`exclusive`: one item open at a time
`Accordion.Item`	`title` (required), `open` (bindable)

Accessibility

Built on <details> and <summary>: expanded state, keyboard and screen reader support come from the browser.
In Chromium, find-in-page opens a closed section that contains the match; other browsers don't search closed sections yet.
Opening animates height where supported (Chromium today) and is instant elsewhere and under reduced motion.

Key	Action
`Enter` / `Space`	Opens or closes the focused section.