Renderless Svelte

Back to docs

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