Toggle

Toggle is a flexible wrapper which provides just the slots for the content.
You can control it with the toggle: boolean flag.

Show content

<script>
    import { fade } from 'svelte/transition'
    import { Button, Toggle } from 'svelte-spectre'

    let toggle = false
</script>

<Toggle bind:toggle>
    <Button slot="toggler" on:click={() => toggle = !toggle}>
        {toggle ? 'Hide' : 'Show'}
    </Button>
    <article transition:fade>
        <h3>Toggled header</h3>
        <p>Toggled content</p>
    <article>
</Toggle>