@sveltestrap/sveltestrap/src/Accordion/Accordion.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as AccordionStories from './Accordion.stories';

<Meta title="Components/Accordion" />

# Accordion <small class="bootstrap-docs">[Bootstrap Accordion](https://getbootstrap.com/docs/5.3/components/accordion/)</small>

The `<Accordion>` component is used to manage and present content in a compact and organized manner, enhancing both the usability and aesthetics of a user interface.

<Canvas>
  <Story of={AccordionStories.Basic} />
</Canvas>

<Controls of={AccordionStories.Basic} />

## Events

<Canvas withSource="none">
  <Story of={AccordionStories.Events} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';

  let id = 1;
  let open = true;

  const toggle = (...args) => {
    console.log('toggle', ...args);
  };
</script>

<Accordion on:toggle={toggle}>
  <AccordionItem
    active
    header="Home"
    on:toggle={(e) => {
      id = 1;
      open = e.detail;
    }}
  >
    Fallbrook
  </AccordionItem>
  <AccordionItem
    header="School"
    on:toggle={(e) => {
      id = 2;
      open = e.detail;
    }}
  >
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem
    header="Library"
    on:toggle={(e) => {
      id = 3;
      open = e.detail;
    }}
  >
    UCSB Library
  </AccordionItem>
</Accordion>

<p>Item #{id} is {open ? 'open' : 'closed'}</p>
`} />

## Flush

<Canvas withSource="none">
  <Story of={AccordionStories.Flush} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
</script>

<Accordion flush>
  <AccordionItem header="Home">Fallbrook</AccordionItem>
  <AccordionItem header="School">
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem header="Library">UCSB Library</AccordionItem>
</Accordion>
`} />

## Stay Open

<Canvas withSource="none">
  <Story of={AccordionStories.StayOpen} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
</script>

<Accordion stayOpen>
  <AccordionItem header="Home">Fallbrook</AccordionItem>
  <AccordionItem header="School">
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem header="Library">UCSB Library</AccordionItem>
</Accordion>
`} />

## Slots

<Canvas withSource="none">
  <Story of={AccordionStories.Slots} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
</script>

<Accordion>
  <AccordionItem active>
    <h4 class="m-0" slot="header">Home</h4>
    Fallbrook
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">School</h4>
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">Library</h4>
    UCSB Library
  </AccordionItem>
</Accordion>
`} />

## Theming

<Canvas withSource="none">
  <Story of={AccordionStories.Theming} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
</script>

<Accordion theme="dark">
  <AccordionItem active>
    <h4 class="m-0" slot="header">Home</h4>
    Fallbrook
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">School</h4>
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">Library</h4>
    UCSB Library
  </AccordionItem>
</Accordion>

<Accordion theme="light">
  <AccordionItem active>
    <h4 class="m-0" slot="header">Home</h4>
    Fallbrook
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">School</h4>
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">Library</h4>
    UCSB Library
  </AccordionItem>
</Accordion>
`} />