Accordion · API
Control and interact with the accordion from LiveView or the client.
Hex doc
Phoenix
Set Value (Client Binding)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={Corex.Accordion.set_value("api-set-value-client", "lorem")}>Open Lorem</.action>
<.action phx-click={Corex.Accordion.set_value("api-set-value-client", ["lorem", "donec"])}>Lorem and Donec</.action>
<.action phx-click={Corex.Accordion.set_value("api-set-value-client", [])}>Close all</.action>
<.accordion id="api-set-value-client" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
Set Value (Client JS)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: ["lorem"]}, bubbles: false)}>Open Lorem</.action>
<.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: ["lorem", "donec"]}, bubbles: false)}>Lorem and Donec</.action>
<.action phx-click={JS.dispatch("corex:accordion:set-value", to: "#api-set-value-client-js", detail: %{value: []}, bubbles: false)}>Close all</.action>
<.accordion class="accordion" id="api-set-value-client-js" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
const el = document.getElementById("api-set-value-client-js");
el?.dispatchEvent(
new CustomEvent("corex:accordion:set-value", {
bubbles: false,
detail: { value: ["lorem"] },
})
);
el?.dispatchEvent(
new CustomEvent("corex:accordion:set-value", {
bubbles: false,
detail: { value: ["lorem", "donec"] },
})
);
el?.dispatchEvent(
new CustomEvent("corex:accordion:set-value", {
bubbles: false,
detail: { value: [] },
})
);
const el: HTMLElement | null = document.getElementById("api-set-value-client-js");
const set = (value: string[]) =>
el?.dispatchEvent(
new CustomEvent("corex:accordion:set-value", {
bubbles: false,
detail: { value },
})
);
set(["lorem"]);
set(["lorem", "donec"]);
set([]);
Set Value (Server)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click="api_set_value_server" value="lorem">Open Lorem</.action>
<.action phx-click="api_set_value_server" value="lorem,donec">Lorem and Donec</.action>
<.action phx-click="api_set_value_server" value="">Close all</.action>
<.accordion class="accordion" id="api-set-value-server" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
def handle_event("api_set_value_server", %{"value" => value}, socket) do
{:noreply, Corex.Accordion.set_value(socket, "api-set-value-server", value)}
end
Value (Client Binding)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={Corex.Accordion.value("api-value-client")}>Value</.action>
<.action phx-click={Corex.Accordion.value("api-value-client", respond_to: :client)}>Value (client only)</.action>
<.accordion class="accordion" id="api-value-client" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
Value (Client JS)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={JS.dispatch("corex:accordion:value", to: "#api-value-client-js", detail: %{}, bubbles: false)}>Value</.action>
<.action phx-click={JS.dispatch("corex:accordion:value", to: "#api-value-client-js", detail: %{respond_to: "client"}, bubbles: false)}>Value (client only)</.action>
<.accordion class="accordion" id="api-value-client-js" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
const layoutToast = (title, description) => {
document.querySelector("#layout-toast")?.dispatchEvent(
new CustomEvent("toast:create", {
bubbles: true,
detail: { title, description, type: "info", duration: 5000 },
})
);
};
const el = document.getElementById("api-value-client-js");
el?.dispatchEvent(
new CustomEvent("corex:accordion:value", { bubbles: false, detail: {} })
);
el?.addEventListener("accordion-value", (e) => {
layoutToast(
"accordion-value",
`${e.detail.id}\n${JSON.stringify(e.detail.value)}`
);
});
const layoutToast = (title: string, description: string) => {
document.querySelector("#layout-toast")?.dispatchEvent(
new CustomEvent("toast:create", {
bubbles: true,
detail: { title, description, type: "info", duration: 5000 },
})
);
};
const el: HTMLElement | null = document.getElementById("api-value-client-js");
el?.dispatchEvent(
new CustomEvent("corex:accordion:value", { bubbles: false, detail: {} })
);
el?.addEventListener("accordion-value", (e: Event) => {
const d = (e as CustomEvent<{ id: string; value: string[] | null }>).detail;
layoutToast("accordion-value", `${d.id}\n${JSON.stringify(d.value)}`);
});
Value (Server)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click="api_value_server">Value</.action>
<.action phx-click="api_value_server_client_only">Value (client only)</.action>
<.accordion class="accordion" id="api-value-server" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
def handle_event("api_value_server", _params, socket) do
{:noreply, Corex.Accordion.value(socket, "api-value-server")}
end
def handle_event("api_value_server_client_only", _params, socket) do
{:noreply, Corex.Accordion.value(socket, "api-value-server", respond_to: :client)}
end
def handle_event("accordion_value_response", %{"id" => id, "value" => value}, socket) do
desc = "#{id}\n#{inspect(value)}"
{:noreply,
Corex.Toast.create(socket, "layout-toast", "accordion_value_response", desc, :info, duration: 5000)}
end
Focused (Client Binding)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
Each trigger waits 5 seconds, then runs the focused read.
<.action phx-click="api_focused_client">Focused</.action>
<.action phx-click="api_focused_client_client_only">Focused (client only)</.action>
<.accordion id="api-focused-client" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
Focused (Client JS)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
Each trigger waits 5 seconds, then runs the focused read.
<.action phx-click="api_focused_js">Focused</.action>
<.action phx-click="api_focused_js_client_only">Focused (client only)</.action>
<.accordion class="accordion" id="api-focused-client-js" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
const el = document.getElementById("api-focused-client-js");
el?.dispatchEvent(new CustomEvent("corex:accordion:focused", { bubbles: false, detail: {} }));
el?.dispatchEvent(
new CustomEvent("corex:accordion:focused", {
bubbles: false,
detail: { respond_to: "client" },
})
);
const el: HTMLElement | null = document.getElementById("api-focused-client-js");
const focused = (respond_to?: "client") =>
el?.dispatchEvent(
new CustomEvent("corex:accordion:focused", {
bubbles: false,
detail: respond_to ? { respond_to } : {},
})
);
focused();
focused("client");
Focused (Server)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
Each trigger waits 5 seconds, then runs the focused read.
<.action phx-click="api_focused_server">Focused</.action>
<.action phx-click="api_focused_server_client_only">Focused (client only)</.action>
<.accordion class="accordion" id="api-focused-server" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
def handle_event("api_focused_client", _params, socket) do
Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-client", []}, 5_000)
{:noreply, socket}
end
def handle_event("api_focused_client_client_only", _params, socket) do
Process.send_after(
self(),
{:accordion_api_focused_after_delay, "api-focused-client", [respond_to: :client]},
5_000
)
{:noreply, socket}
end
def handle_event("api_focused_js", _params, socket) do
Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-client-js", []}, 5_000)
{:noreply, socket}
end
def handle_event("api_focused_js_client_only", _params, socket) do
Process.send_after(
self(),
{:accordion_api_focused_after_delay, "api-focused-client-js", [respond_to: :client]},
5_000
)
{:noreply, socket}
end
def handle_event("api_focused_server", _params, socket) do
Process.send_after(self(), {:accordion_api_focused_after_delay, "api-focused-server", []}, 5_000)
{:noreply, socket}
end
def handle_event("api_focused_server_client_only", _params, socket) do
Process.send_after(
self(),
{:accordion_api_focused_after_delay, "api-focused-server", [respond_to: :client]},
5_000
)
{:noreply, socket}
end
Item State (Client Binding)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={Corex.Accordion.item_state("api-item-client", "lorem")}>lorem</.action>
<.action phx-click={Corex.Accordion.item_state("api-item-client", "duis")}>duis</.action>
<.action phx-click={Corex.Accordion.item_state("api-item-client", "donec")}>donec</.action>
<.accordion class="accordion" id="api-item-client" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
Item State (Client JS)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "lorem"}, bubbles: false)}>lorem</.action>
<.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "duis"}, bubbles: false)}>duis</.action>
<.action phx-click={JS.dispatch("corex:accordion:item-state", to: "#api-item-client-js", detail: %{value: "donec"}, bubbles: false)}>donec</.action>
<.accordion id="api-item-client-js" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
const el = document.getElementById("api-item-client-js");
const itemState = (value) =>
el?.dispatchEvent(
new CustomEvent("corex:accordion:item-state", { bubbles: false, detail: { value } })
);
itemState("lorem");
itemState("duis");
itemState("donec");
const el: HTMLElement | null = document.getElementById("api-item-client-js");
const itemState = (value: string) =>
el?.dispatchEvent(
new CustomEvent("corex:accordion:item-state", { bubbles: false, detail: { value } })
);
itemState("lorem");
itemState("duis");
itemState("donec");
Item State (Server)
Consectetur adipiscing elit. Sed sodales ullamcorper tristique.
Nullam eget vestibulum ligula, at interdum tellus.
Congue molestie ipsum gravida a. Sed ac eros luctus.
<.action phx-click="api_item_state_server_lorem">lorem</.action>
<.action phx-click="api_item_state_server_duis">duis</.action>
<.action phx-click="api_item_state_server_donec">donec</.action>
<.accordion class="accordion" id="api-item-server" items={Corex.Content.new([
%{value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
%{value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
%{value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus.", disabled: true}
])} />
def handle_event("api_item_state_server_lorem", _params, socket) do
{:noreply, Corex.Accordion.item_state(socket, "api-item-server", "lorem", disabled: false)}
end
def handle_event("api_item_state_server_duis", _params, socket) do
{:noreply, Corex.Accordion.item_state(socket, "api-item-server", "duis", disabled: false)}
end
def handle_event("api_item_state_server_donec", _params, socket) do
{:noreply, Corex.Accordion.item_state(socket, "api-item-server", "donec", disabled: true)}
end