Accordion · Event

Subscribe to open value changes from LiveView or the client.

Hex doc

Phoenix

On Value Change (Server)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

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

    <.accordion
  class="accordion"
  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."}
  ])}
  on_value_change="accordion_value_changed"
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

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

On Value Change (Client)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

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

    <.accordion
  id="events-on-value-change-client"
  class="accordion"
  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."}
  ])}
  on_value_change_client="accordion-value-changed"
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

    const el = document.getElementById("events-on-value-change-client");
el?.addEventListener("accordion-value-changed", (event) => {
  const detail = event.detail;
  console.log(detail.id, detail.value);
});

    const el = document.getElementById("events-on-value-change-client");
type Detail = { id: string; value: string[] };
el?.addEventListener("accordion-value-changed", (event: Event) => {
  const detail = (event as CustomEvent<Detail>).detail;
  console.log(detail.id, detail.value);
});