Skip to content

Collapsible

Toggle content visibility.

Basic

    <.collapsible class="collapsible">
  <:trigger>Toggle</:trigger>
  <:content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </:content>
</.collapsible>

With indicator

    <.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

    <.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>