Collapsible
Toggle content visibility.
Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<.collapsible class="collapsible">
<:trigger>Toggle</:trigger>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</:content>
</.collapsible>
With indicator
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<.collapsible class="collapsible">
<:trigger>Toggle</:trigger>
<:closed>
<.heroicon name="hero-chevron-right" />
</:closed>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</:content>
</.collapsible>
Custom slots
Panel body with custom opened/closed adornments.
<.collapsible class="collapsible">
<:trigger :let={c}>
{if c.open, do: "Collapse", else: "Expand"}
</:trigger>
<:closed>
<.heroicon name="hero-chevron-down" />
</:closed>
<:opened>
<.heroicon name="hero-chevron-up" />
</:opened>
<:content :let={_c}>
Panel body with custom opened/closed adornments.
</:content>
</.collapsible>