Collapsible · API
Open and close from LiveView bindings, DOM events, or server push.
Client bindings
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="layout__row">
<.action phx-click={Corex.Collapsible.set_open("collapsible-api", true)} class="button button--sm">
Open
</.action>
<.action phx-click={Corex.Collapsible.set_open("collapsible-api", false)} class="button button--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>
Client JS
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="layout__row">
<.action
phx-click={
Phoenix.LiveView.JS.dispatch("corex:collapsible:set-open",
to: "#collapsible-api-js",
detail: %{open: true},
bubbles: false
)
}
class="button button--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 button--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 } })
);
Server
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="layout__row">
<.action phx-click="collapsible_api_open" class="button button--sm">Open</.action>
<.action phx-click="collapsible_api_close" class="button button--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