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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...

<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

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: ChevronUp, down: ChevronDown }
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'
iconSize number 24
iconClass string 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300'
isOpen boolean false
icons AccordionIconType { up: ChevronUp, down: ChevronDown }

Slots

AccordionItem, AccordionFlush

Name Description
header Table header slot
body Table body slot

References