Accordion

Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options

The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.

A popular use case would be the “Frequently Asked Questions” section of a website or page when you can show questions and answers for each child element.

Setup

<script>
  import { AccordionItem, AccordionFlush } from 'flowbite-svelte'
  // if you are using icons
  import { Home, ArrowCircleUp, ArrowCircleDown, Archive, Beaker } from 'svelte-heros'
</script>

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 ...
    </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 ...
    </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 ...
    </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...
    </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 ...
    </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 ...
    </p>
  </div>
</AccordionFlush>

Arrow style

Use the icons prop to set up and down icons.

<script>
  import {ArrowCircleUp, ArrowCircleDown} from 'svelte-heros'
  let icons={
    up:ArrowCircleUp,
    down:ArrowCircleDown
  }
</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 ...
    </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 ...
    </p>
  </div>
</AccordionItem>

AccordionItem: slot names

header
body

Icon Accordion

Add id 1,2,3,... to AccordionItem component.

Install svelte-heros.

npm i svelte-heros

<script>
  import { Accordion } from "flowbite-svelte";
  import { AccordionItem } from "flowbite-svelte";
  import { Archive, Beaker } from "svelte-heros";
</script>

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

Props

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

AccordionItem

AccordionFlush

Slots

AccordionItem, AccordionFlush

References