Collapsible

Event

Subscribe to open changes from LiveView or the client.

On Open Change (Server)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.collapsible
  class="collapsible"
  on_open_change="collapsible_open_changed"
>
  <:trigger>Toggle</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>Lorem ipsum dolor sit amet.</:content>
</.collapsible>

    def handle_event("collapsible_open_changed", %{"id" => id, "open" => open} = params, socket) do
  IO.inspect(params, label: "collapsible_open_changed")
  {:noreply, socket}
end

On Open Change (Client)

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.collapsible
  id="collapsible-events-client"
  class="collapsible"
  on_open_change_client="collapsible-open-changed"
>
  <:trigger>Toggle</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>Lorem ipsum dolor sit amet.</:content>
</.collapsible>

    const el = document.getElementById("collapsible-events-client");
el?.addEventListener("collapsible-open-changed", (event) => console.log(event.detail));

    const el = document.getElementById("collapsible-events-client");
el?.addEventListener("collapsible-open-changed", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);