Icon Accordion

Examples

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

Install svelte-heros.

npm i svelte-heros

Examples

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.

Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.

Learn more about these technologies:

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

<Accordion>
  <AccordionItem id="1">
    <h2 slot="header">
      <span class="flex">
        <span class="mr-2"><ArchiveOutline /></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"><BeakerOutline /></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>
</Accordion>

Props

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

AccordionDefault

Name	Type	Default
duration	number	0.2
easing	string	'ease'
id	number	undefined

AccordionItem

Name	Type	Default
id	string	''
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'
slotClass	string	'p-5 border border-t-0 border-gray-200 dark:border-gray-700'

Related components

Default Accordion

Icon Accordion

References

Flowbite Accordion