Collapsible
Easy to toggle elements
- usage
Did you know?
I have a bowling personal best of 194<Collapsible label="Did you know?">
I have a bowling personal best of 194
</Collapsible>- accordion
Section A
Content ASection B
Content BSection C
Content C<Collapsible name="sections" label="Section A" open>
Content A
</Collapsible>
<Collapsible name="sections" label="Section B">
Content B
</Collapsible>
<Collapsible name="sections" label="Section C">
Content C
</Collapsible>- custom content
Show
Hey there ^_^<Collapsible>
{#snippet trigger(open)}
{open ? 'Hide' : 'Show'}
{/snippet}
Hey there ^_^
</Collapsible>- events
Click me :)
Hey there ^_^<Collapsible label="Click me :)"
onopen="{() => alert('Now you see me')}"
onclose="{() => alert('Bye')}">
Hey there ^_^
</Collapsible>