Accordion.md

Accordion

The Accordion is a component build out of two parts: a clickable element and a content box that shows up when said button is clicked. The clickable element should be mounted in a slot named header and has the following fields:

Property	Description
toggle	A function to toggle the Accordion
isOpen	A flag indicating the current state

AccordionGroup

If you group Accordions together in one AccordionGroup this will automatically ensure that only one element can be open at all times. To use it simply add Accordions to the group:

<script>
    import { Accordion, AccordionGroup } from 'renderless-svelte'
</script>

<AccordionGroup>
    <Accordion></Accordion>
    <Accordion></Accordion>
    <Accordion></Accordion>
    <Accordion></Accordion>
</AccordionGroup>

AccordionGroup has no properties or events itself, it is just a wrapper with some nice functionality.

Examples

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

<Accordion>
    <button slot="header" let:toggle on:click={toggle}>Squirrel 🐿️</button>
    <div>
        This is a text about Squirrels 🐿️
    </div>
</Accordion>

<script>
    import { Accordion, AccordionGroup } from 'renderless-svelte'
</script>

<AccordionGroup>
    <Accordion>
        <button slot="header" let:toggle on:click={toggle}>Squirrel 🐿️</button>
        <div>
            This is a text about Squirrels 🐿️
        </div>
    </Accordion>
    <Accordion>
        <button slot="header" let:toggle on:click={toggle}>Rabbit 🐇</button>
        <div>
            This is a text about Rabbits 🐇
        </div>
    </Accordion>
    <Accordion>
        <button slot="header" let:toggle on:click={toggle}>Hamster 🐹</button>
        <div>
            This is a text about Hamsters 🐹
        </div>
    </Accordion>
</AccordionGroup>