API

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Collapsible.set_open("collapsible-api", true)} class="button ui-size-sm">
    Open
  </.action>
  <.action phx-click={Corex.Collapsible.set_open("collapsible-api", false)} class="button ui-size-sm">
    Close
  </.action>
</div>

<.collapsible id="collapsible-api" class="collapsible">
  <:trigger>Toggle</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </:content>
</.collapsible>

  

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:collapsible:set-open",
        to: "#collapsible-api-js",
        detail: %{open: true},
        bubbles: false
      )
    }
    class="button ui-size-sm"
  >
    Open
  </.action>
  <.action
    phx-click={
      Phoenix.LiveView.JS.dispatch("corex:collapsible:set-open",
        to: "#collapsible-api-js",
        detail: %{open: false},
        bubbles: false
      )
    }
    class="button ui-size-sm"
  >
    Close
  </.action>
</div>

<.collapsible id="collapsible-api-js" class="collapsible">
  <:trigger>Toggle</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </:content>
</.collapsible>

  

    const el = document.getElementById("collapsible-api-js");
el?.dispatchEvent(
  new CustomEvent("corex:collapsible:set-open", { bubbles: false, detail: { open: true } })
);
el?.dispatchEvent(
  new CustomEvent("corex:collapsible:set-open", { bubbles: false, detail: { open: false } })
);

  

    const el: HTMLElement | null = document.getElementById("collapsible-api-js");
el?.dispatchEvent(
  new CustomEvent("corex:collapsible:set-open", { bubbles: false, detail: { open: true } })
);
el?.dispatchEvent(
  new CustomEvent("corex:collapsible:set-open", { bubbles: false, detail: { open: false } })
);

  

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="collapsible_api_open" class="button ui-size-sm">Open</.action>
  <.action phx-click="collapsible_api_close" class="button ui-size-sm">Close</.action>
</div>

<.collapsible id="collapsible-api-server" class="collapsible">
  <:trigger>Toggle</:trigger>
  <:closed>
    <.heroicon name="hero-chevron-right" />
  </:closed>
  <:content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </:content>
</.collapsible>

  

    def handle_event("collapsible_api_open", _, socket) do
  {:noreply, Corex.Collapsible.set_open(socket, "collapsible-api-server", true)}
end

def handle_event("collapsible_api_close", _, socket) do
  {:noreply, Corex.Collapsible.set_open(socket, "collapsible-api-server", false)}
end