Phoenix implementation of the Zag.js Accordion.

Anatomy

Minimal

<.accordion
class="accordion"
items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}
/>

With slots

With items and <:indicator> slot so every item shares the same indicator markup.

<.accordion
class="accordion"
items={
  Corex.Content.new([
    %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
    %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
    %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
  ])
}
>
<:indicator>
  <.heroicon name="hero-chevron-right" />
</:indicator>
</.accordion>

Custom slots

With items, customize each item using slots with :let={item} to access the item and its meta data

<.accordion
  class="accordion"
  value="lorem"
  items={
    Corex.Content.new([
      %{
        value: "lorem",
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.",
        meta: %{indicator: "hero-arrow-long-right", icon: "hero-chat-bubble-left-right"}
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus.",
        meta: %{indicator: "hero-chevron-right", icon: "hero-device-phone-mobile"}
      },
      %{
        value: "donec",
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus.",
        disabled: true,
        meta: %{indicator: "hero-chevron-double-right", icon: "hero-phone"}
      }
    ])
  }
>
  <:trigger :let={item}>
    <.heroicon name={item.meta.icon} />{item.label}
  </:trigger>
  <:content :let={item}><p>{item.content}</p></:content>
  <:indicator :let={item}>
    <.heroicon name={item.meta.indicator} />
  </:indicator>
</.accordion>

Manual slots

With an empty items list, use multiple :trigger, :content, and optional :indicator slots.

Each slot takes a value string that ties the three together.

<.accordion class="accordion" value="lorem">
  <:trigger value="lorem">
    <.heroicon name="hero-chevron-right" /> Lorem ipsum dolor sit amet
  </:trigger>
  <:content value="lorem"><p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p></:content>
  <:indicator value="lorem">
    <.heroicon name="hero-chevron-down" />
  </:indicator>

  <:trigger value="duis">
    <.heroicon name="hero-chevron-right" /> Duis dictum gravida odio ac pharetra?
  </:trigger>
  <:content value="duis"><p>Nullam eget vestibulum ligula, at interdum tellus.</p></:content>
  <:indicator value="duis">
    <.heroicon name="hero-chevron-down" />
  </:indicator>
</.accordion>

Compound

Take full structural control with the accordion_root, accordion_item, accordion_trigger, accordion_content, and accordion_indicator sub-components.

Manual items

<.accordion :let={ctx} compound class="accordion">
  <.accordion_root ctx={ctx}>
    <.accordion_item :let={item} ctx={ctx} value="lorem">
      <.accordion_trigger item={item}>
        Lorem ipsum dolor sit amet
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p>
      </.accordion_content>
    </.accordion_item>
    <.accordion_item :let={item} ctx={ctx} value="duis">
      <.accordion_trigger item={item}>
        Duis dictum gravida odio ac pharetra?
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Nullam eget vestibulum ligula, at interdum tellus.</p>
      </.accordion_content>
    </.accordion_item>
    <.accordion_item :let={item} ctx={ctx} value="donec">
      <.accordion_trigger item={item}>
        Donec condimentum ex mi
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>Congue molestie ipsum gravida a. Sed ac eros luctus.</p>
      </.accordion_content>
    </.accordion_item>
  </.accordion_root>
</.accordion>

From a list

<.accordion :let={ctx} compound id="faq" class="accordion">
  <.accordion_root ctx={ctx}>
    <.accordion_item :for={entry <- @items} :let={item} ctx={ctx} value={entry.value}>
      <.accordion_trigger item={item}>
        {entry.label}
        <:indicator>
          <.accordion_indicator item={item}>
            <.heroicon name="hero-chevron-right" />
          </.accordion_indicator>
        </:indicator>
      </.accordion_trigger>
      <.accordion_content item={item}>
        <p>{entry.content}</p>
      </.accordion_content>
    </.accordion_item>
  </.accordion_root>
</.accordion>

API

Requires a stable id on <.accordion>.

Events

Pick an event name and pass it to on_* on <.accordion>.

Server events

on_value_change

<.accordion
  id="faq"
  class="accordion"
  on_value_change="items_changed"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

def handle_event("items_changed", %{"id" => _id, "value" => values}, socket) do
  {:noreply, assign(socket, :open_items, values)}
end

on_focus_change

<.accordion
  id="faq"
  class="accordion"
  on_focus_change="focus_changed"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

def handle_event("focus_changed", %{"id" => _id, "value" => item}, socket) do
  {:noreply, assign(socket, :focused_item, item)}
end

Client events

on_value_change_client

<.accordion
  id="faq"
  class="accordion"
  on_value_change_client="items-changed"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

document.getElementById("faq")?.addEventListener("items-changed", (e) => {
  console.log(e.detail.value, e.detail.added, e.detail.removed);
});

on_focus_change_client

<.accordion
  id="faq"
  class="accordion"
  on_focus_change_client="focus-changed"
  items={
    Corex.Content.new([
      %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit."},
      %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula."},
      %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a."}
    ])
  }
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

document.getElementById("faq")?.addEventListener("focus-changed", (e) => {
  console.log(e.detail.value);
});

Patterns

Async

If items are not ready in mount/3—for example they load from the database or an external service—use assign_async/3, render inside <.async_result>, and put <.accordion_skeleton> in the :loading slot while the async assign is still pending.

defmodule MyAppWeb.AccordionAsyncLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign_async(:accordion, fn ->
        items =
          Corex.Content.new([
            %{
              value: "lorem",
              label: "Lorem ipsum dolor sit amet",
              content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.",
              disabled: true
            },
            %{
              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."
            }
          ])

        {:ok, %{accordion: %{items: items, value: ["duis", "donec"]}}}
      end)

    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <.async_result :let={accordion} assign={@accordion}>
      <:loading>
        <.accordion_skeleton count={3} class="accordion" />
      </:loading>
      <:failed>Could not load accordion.</:failed>
      <.accordion
        id="async-accordion"
        class="accordion"
        items={accordion.items}
        value={accordion.value}
      />
    </.async_result>
    """
  end
end

Controlled

For server-owned open state—validation, forms, or rules that must run before items open—set controlled, bind value, and handle on_value_change in LiveView so assigns stay the source of truth.

defmodule MyAppWeb.AccordionLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :accordion_value, ["lorem"])}
  end

  def handle_event("accordion_value_changed", %{"id" => _id, "value" => value}, socket) do
    {:noreply, assign(socket, :accordion_value, value)}
  end

  def render(assigns) do
    ~H"""
    <.accordion
      id="my-accordion"
      controlled
      value={@accordion_value}
      on_value_change="accordion_value_changed"
      class="accordion"
      items={
        Corex.Content.new([
          %{
            value: "lorem",
            label: "Lorem ipsum dolor sit amet",
            content: "Consectetur adipiscing elit."
          },
          %{
            value: "duis",
            label: "Duis dictum gravida odio ac pharetra?",
            content: "Nullam eget vestibulum ligula."
          }
        ])
      }
    />
    """
  end
end

Stream

Use Phoenix.LiveView.stream/3 to add or remove accordion items at runtime. Keep a list assign in sync with the stream and pass it as items. Configure dom_id to match each item element id (accordion:my-accordion:item:#{value}).

defmodule MyAppWeb.AccordionStreamLive do
  use MyAppWeb, :live_view

  @initial_items [
    %{value: "1", label: "Lorem ipsum", content: "Consectetur adipiscing elit."},
    %{value: "2", label: "Duis dictum", content: "Nullam eget vestibulum ligula."},
    %{value: "3", label: "Donec condimentum", content: "Congue molestie ipsum gravida a."}
  ]

  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> stream_configure(:items, dom_id: &"accordion:my-accordion:item:#{&1.value}")
     |> stream(:items, @initial_items)
     |> assign(:items_list, @initial_items)
     |> assign(:next_id, 4)}
  end

  def handle_event("add_item", _params, socket) do
    id = to_string(socket.assigns.next_id)
    item = %{value: id, label: "Item #{id}", content: "Content for item #{id}."}

    {:noreply,
     socket
     |> stream_insert(:items, item)
     |> assign(:items_list, socket.assigns.items_list ++ [item])
     |> assign(:next_id, socket.assigns.next_id + 1)}
  end

  def render(assigns) do
    ~H"""
    <.accordion id="my-accordion" class="accordion" items={Corex.Content.new(@items_list)} />
    """
  end
end

Animation

JS

Built-in height and opacity (Web Animations API). Set animation_options with Corex.Animation.Height for duration, easing, and opacity.

<.accordion
  class="accordion"
  animation="js"
  animation_options={%Corex.Animation.Height{duration: 0.3, easing: "ease-out", opacity_start: 0, opacity_end: 1}}
  items={
    Corex.Content.new([
      %{
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus."
      },
      %{
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus."
      }
    ])
  }
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

Instant

Items open and close immediately. Content visibility uses the native hidden attribute; there is no height animation.

<.accordion
  class="accordion"
  animation="instant"
  items={
    Corex.Content.new([
      %{
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus."
      },
      %{
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus."
      }
    ])
  }
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

Custom (Motion)

Set animation="custom" and on_value_change_client to run Motion (or any JS) on open and close. Content stays in the DOM (hidden is not toggled). Each change fires a CustomEvent on the accordion with:

// event.detail — AccordionChangedDetail
{ id, value, previousValue, added, removed }

added and removed list which item values opened or closed so you can animate only those items. Register the listener after mount (and again after LiveView navigation if the DOM is replaced).

<.accordion
  class="accordion"
  animation="custom"
  on_value_change_client="my-accordion-changed"
  items={
    Corex.Content.new([
      %{
        label: "Lorem ipsum dolor sit amet",
        content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."
      },
      %{
        label: "Duis dictum gravida odio ac pharetra?",
        content: "Nullam eget vestibulum ligula, at interdum tellus."
      },
      %{
        label: "Donec condimentum ex mi",
        content: "Congue molestie ipsum gravida a. Sed ac eros luctus."
      }
    ])
  }
>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

import { animate } from "motion"
import {
  findAccordionContent,
  animateHeightOpen,
  animateHeightClose,
} from "corex"

const reducedMotion = () =>
  window.matchMedia("(prefers-reduced-motion: reduce)").matches

document.addEventListener("my-accordion-changed", (e) => {
  const root = document.getElementById(e.detail.id)
  if (!root) return
  e.detail.added.forEach((v) => {
    const el = findAccordionContent(root, v)
    if (!el) return
    animateHeightOpen(el, { animator: animate, duration: 0.55, easing: [0.16, 1, 0.3, 1] })
    if (!reducedMotion()) {
      animate(
        el,
        { filter: ["blur(12px)", "blur(0px)"], scale: [0.96, 1] },
        { duration: 0.6, easing: [0.16, 1, 0.3, 1] },
      )
    }
  })
  e.detail.removed.forEach((v) => {
    const el = findAccordionContent(root, v)
    if (!el) return
    animateHeightClose(el, { animator: animate, duration: 0.32, easing: [0.7, 0, 0.84, 0] })
    if (!reducedMotion()) {
      animate(
        el,
        { filter: ["blur(0px)", "blur(10px)"], scale: [1, 0.97] },
        { duration: 0.3, easing: "ease-in" },
      )
    }
  })
})

Style

Target parts with data-scope and data-part, or use Corex Design: import tokens and accordion.css, then set class="accordion" on <.accordion>.

[data-scope="accordion"][data-part="root"] {}
[data-scope="accordion"][data-part="item"] {}
[data-scope="accordion"][data-part="item-trigger"] {}
[data-scope="accordion"][data-part="item-text"] {}
[data-scope="accordion"][data-part="item-content"] {}
[data-scope="accordion"][data-part="item-indicator"] {}

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/accordion.css";

Stack modifiers on the host (class on <.accordion>). Combine axes, for example accordion accordion--accent accordion--lg.

Color

Semantic palette on the open item trigger (from design tokens).

Size

Trigger padding, gap, min-height, and content spacing.

Text

Font size on trigger and content.

Rounded

Corner radius on trigger and content.

Max width