Accordion

A collapsible component that is used to show and hide content.

It is built on Bits UI’s headless Accordion, so keyboard support and ARIA wiring come for free. Each item must sit inside an Accordion.Root, which owns the open/closed state.

Example

Usage

<script>
  import { Accordion } from 'bits-ui';
  import AccordionItem from '$lib/dist/components/Accordion.svelte';
</script>

<Accordion.Root type="single" class="bg-base-200 p-4 divide-y divide-base-content/80">
  <AccordionItem title="Title One" content="Content One" />
  <AccordionItem title="Title Two" content="Content Two" />
  <AccordionItem title="Title Three" content="Content Three" />
</Accordion.Root>

Keep Accordion Open

In the above example only one item stays open at a time, because Accordion.Root is set to type="single". Switch it to type="multiple" to let several items be open at once.

<script>
  import { Accordion } from 'bits-ui';
  import AccordionItem from '$lib/dist/components/Accordion.svelte';
</script>

<Accordion.Root type="multiple" class="bg-base-200 p-4 divide-y divide-base-content/80">
  <AccordionItem title="Will this stay open?" content="Yes!" />
  <AccordionItem title="Title Two" content="Content Two" />
  <AccordionItem title="Title Three" content="Content Three" />
</Accordion.Root>

Props

Prop	Type	Description
`title`	`string`	The heading shown on the trigger.
`content`	`string`	The panel body. Rendered as HTML, so inline markup is allowed.
`id`	`string`	Optional. Defaults to a slug of `title`; also used as the item’s value.

Bits UI reference: Accordion

Table of Contents

Example

Usage

Keep Accordion Open

Props