import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as AccordionStories from './Accordion.stories';
# Accordion [Bootstrap Accordion](https://getbootstrap.com/docs/5.3/components/accordion/)
The `` component is used to manage and present content in a compact and organized manner, enhancing both the usability and aesthetics of a user interface.
## Events
import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
let id = 1;
let open = true;
const toggle = (...args) => {
console.log('toggle', ...args);
};
{
id = 1;
open = e.detail;
}}
>
Fallbrook
{
id = 2;
open = e.detail;
}}
>
Buena Vista Elementary {
id = 3;
open = e.detail;
}}
>
UCSB Library
Item #{id} is {open ? 'open' : 'closed'}
`} />
## Flush
import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
FallbrookBuena Vista ElementaryUCSB Library
`} />
## Stay Open
import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
FallbrookBuena Vista ElementaryUCSB Library
`} />
## Slots
import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';