Accordion

Accordions are used to toggle sections of content.

<script>
    import { Accordion } from 'svelte-spectre'
</script>

<Accordion group="demo" opened toggled>
    <h5 slot="header">
        <i class="icon icon-{icon} mr-1" />Accordion1
    </h5>
    Accordion<br />Accordion<br />Accordion
</Accordion>
<Accordion group="demo" toggled>
    <h5 slot="header">
        <i class="icon icon-{icon} mr-1" />Accordion2
    </h5>
    Accordion1<br />Accordion1<br />Accordion1
</Accordion>
<Accordion group="demo" toggled>
    <h5 slot="header">
        <i class="icon icon-{icon} mr-1" />Accordion2
    </h5>
    Accordion2<br />Accordion2<br />Accordion2
</Accordion>