Accordion

Default accordion

Use id=1,2,3,.. to add top and bottom border.

<script>
  import { AccordionItem } from "flowbite-svelte";
</script>

<AccordionItem id="1">
  <h2 slot="header">My Header 1</h2>
  <div slot="body">
    <p class="mb-2 text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet ...
    </p>
    ...
  </div>
</AccordionItem>
<AccordionItem id="2">
  <h2 slot="header">My Header 2</h2>
  <div slot="body">
    <p class="mb-2 text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet ...
    </p>
    ...
  </div>
</AccordionItem>

Always open

Use the `isOpen` prop to make an item open on mount.

<AccordionItem id="1" isOpen>
  <h2 slot="header">Header 2-1</h2>
  <div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>
<AccordionItem id="2">
  <h2 slot="header">Header 2-2</h2>
  <div slot="body">
  <p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>

Color option

Use the `color` prop to add color.

<AccordionItem id="1" color>
  <h2 slot="header">Header 2-1</h2>
  <div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>
<AccordionItem id="2" color>
  <h2 slot="header">Header 2-2</h2>
  <div slot="body">
  <p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>

Flush accordion

Use the `flush` prop to remove the rounded borders.

<AccordionItem id="1" flush>
  <h2 slot="header">Header 2-1</h2>
  <div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>
<AccordionItem id="2" flush>
  <h2 slot="header">Header 2-2</h2>
  <div slot="body">
  <p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>

Arrow style

Use the `icons` prop to set up and down icons.

<script>
  import {ArrowCircleUpOutline, ArrowCircleDownOutline} from 'svelte-heros'
  let icons={
    up:ArrowCircleUpOutline,
    down:ArrowCircleDownOutline
  }
</script>

<AccordionItem id="1" {icons}>
  <h2 slot="header">Header 2-1</h2>
  <div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>
<AccordionItem id="2" {icons}>
  <h2 slot="header">Header 2-2</h2>
  <div slot="body">
  <p class="mb-2 text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab
    necessitatibus sint explicabo, atque temporibus rem iusto, dicta
    voluptatem molestias ex quibusdam ipsa omnis laboriosam deleniti ipsum
    nisi quis perspiciatis.
  </p>
  </div>
</AccordionItem>

AccordionItem: slot names

header
body

Props

The component has the following props, type, and default values. See type-list page for type information.

Related components

Default Accordion

Icon Accordion

References

Flowbite Accordion