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.

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. 

<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 `AccordionFlush` component to remove the rounded borders.

<script>
  import { AccordionFlush } from 'flowbite-svelte'
</script>

<AccordionFlush id="1" >
  <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>
</AccordionFlush>
<AccordionFlush 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>
</AccordionFlush>

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 types page for type information.

AccordionItem

Name Type Default
id string ''
slotClass string 'p-5 border border-t-0 border-gray-200 dark:border-gray-700'
isOpen boolean false
color boolean false
icons AccordionIconType { up: ChevronUpSolid, down: ChevronDownSolid }
iconSize number 24
iconClass string 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300'
btnClass string 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
colorClass string 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700'

AccordionFlush

Name Type Default
id string ''
btnClass string 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400'
slotClass string 'py-5 border-b border-gray-200 dark:border-gray-700'
isOpen boolean false
icons AccordionIconType { up: ChevronUpSolid, down: ChevronDownSolid }
iconSize number 24
iconClass string 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300'

Related components

Default Accordion

Icon Accordion

References

Flowbite Accordion