Collapsible · Pattern

    <.async_result :let={panel} assign={@collapsible}>
  <:loading>
    <.collapsible_skeleton class="collapsible" />
  </:loading>

  <.collapsible
    class="collapsible"
    open={panel.open}
  >
    <:trigger>Details</:trigger>
    <:closed>
      <.heroicon name="hero-chevron-right" />
    </:closed>
    <:content>
      {panel.body}
    </:content>
  </.collapsible>
</.async_result>

  

    def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign_async(:collapsible, fn ->
     Process.sleep(1000)
     {:ok, %{collapsible: %{open: false, body: "Loaded after async."}}}
   end)}
end

  

    <.collapsible
  class="collapsible"
  controlled
  open={@open}
  on_open_change="patterns_collapsible_changed"
>
  <:trigger>Controlled</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>LiveView owns open.</:content>
</.collapsible>

  

    def handle_event("patterns_collapsible_changed", %{"open" => open}, socket) do
  {:noreply, assign(socket, :open, open)}
end