Accordion

Storybook

A vertically stacked set of interactive headings that each reveal a section of content. Demonstrated below in all 3 state modes plus push_event commands.

Client-only

No server events. The accordion toggles purely via JavaScript — zero latency.

Yes. It follows the WAI-ARIA design pattern for accordions.

Yes. It comes with default styles that match the shadcn/ui aesthetic.

Yes. It uses CSS animations for smooth open/close transitions.

<.accordion id="client-faq" type="single" collapsible>
  <.accordion_item value="q1">
    <.accordion_trigger>Is it accessible?</.accordion_trigger>
    <.accordion_content>
      Yes. It follows the WAI-ARIA design pattern for accordions.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="q2">
    <.accordion_trigger>Is it styled?</.accordion_trigger>
    <.accordion_content>
      Yes. It comes with default styles that match the shadcn/ui aesthetic.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="q3">
    <.accordion_trigger>Is it animated?</.accordion_trigger>
    <.accordion_content>
      Yes. It uses CSS animations for smooth open/close transitions.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Multiple

With type="multiple", several items can be open at the same time. No collapsible attr needed — items toggle independently.

Yes! Unlike type="single", multiple items can be expanded simultaneously. Try opening all three.

No. In multiple mode every item is independently togglable — the collapsible attr only applies to single mode.

Absolutely. You can combine type="multiple" with on_value_change or a server-owned value assign just like single mode.

<.accordion id="multi-faq" type="multiple">
  <.accordion_item value="m1">
    <.accordion_trigger>Can I open multiple items?</.accordion_trigger>
    <.accordion_content>
      Yes! Unlike type="single", multiple items
      can be expanded simultaneously. Try opening all three.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="m2">
    <.accordion_trigger>Do I need the collapsible prop?</.accordion_trigger>
    <.accordion_content>
      No. In multiple mode every item is independently togglable —
      the collapsible attr only applies to single mode.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="m3">
    <.accordion_trigger>Does it work with server modes?</.accordion_trigger>
    <.accordion_content>
      Absolutely. You can combine type="multiple"
      with on_value_change or a server-owned value assign just like single mode.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Hybrid

JS toggles instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.

Hybrid mode gives you the best of both worlds: instant client-side toggling with server notification. The UI updates immediately, and the server receives an event it can react to.

Use hybrid mode when you need the server to know which items are open (e.g. for analytics, conditional loading) but don't want to sacrifice perceived speed.

Pass on_value_change="accordion:change" without setting value. The hook toggles DOM state, then pushes the event name with an id + value + action payload.

Event Log

Toggle an item above to see events appear here.

<.accordion id="hybrid-faq" type="single" collapsible on_value_change="accordion:change">
  <.accordion_item value="item-1">
    <.accordion_trigger>What is hybrid mode?</.accordion_trigger>
    <.accordion_content>
      Hybrid mode gives you the best of both worlds: instant client-side toggling
      with server notification. The UI updates immediately, and the server receives
      an event it can react to.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>When should I use it?</.accordion_trigger>
    <.accordion_content>
      Use hybrid mode when you need the server to know which items are open
      (e.g. for analytics, conditional loading) but don't want to sacrifice
      perceived speed.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-3">
    <.accordion_trigger>How does it work?</.accordion_trigger>
    <.accordion_content>
      Pass on_value_change="accordion:change"
      without setting value.
      The hook toggles DOM state, then pushes the event name with an
      id + value + action payload.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Server-controlled

The server owns the state. Use the buttons below to open items externally. The accordion reflects the server's value assign.

This item is opened/closed by the server. Click the buttons above to control which item is open.

Server-controlled mode is useful when you need full authority over the UI state.

In this mode, the JS hook defers entirely to the server's value assign. Direct clicks still work — the hook sends the event and the server decides.

Current server value: ""

<.button size="sm" variant="outline" phx-click="open-item" phx-value-item="srv-1">
  Open "First"
</.button>
<.button size="sm" variant="outline" phx-click="open-item" phx-value-item="srv-2">
  Open "Second"
</.button>
<.button size="sm" variant="destructive" phx-click="close-all">
  Close All
</.button>

<.accordion id="server-faq" type="single" collapsible value={@server_value} on_value_change="accordion:change">
  <.accordion_item value="srv-1">
    <.accordion_trigger>First item</.accordion_trigger>
    <.accordion_content>
      This item is opened/closed by the server. Click the buttons above
      to control which item is open.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="srv-2">
    <.accordion_trigger>Second item</.accordion_trigger>
    <.accordion_content>
      Server-controlled mode is useful when you need full authority over
      the UI state.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="srv-3">
    <.accordion_trigger>Third item</.accordion_trigger>
    <.accordion_content>
      In this mode, the JS hook defers entirely to the server's value assign.
      Direct clicks still work — the hook sends the event and the server decides.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Push Event (Server → Client)

The server pushes commands to a client-mode accordion via push_event/3. The accordion has no value or on_value_change — it's client-only, but the server can still command it.

Opened by the server via push_event with command "open".

The server can open, close, or toggle any item by pushing a command. No re-render needed — the hook handles it client-side.

<.button size="sm" variant="outline" phx-click="push-open" phx-value-item="p1">
  Open "First"
</.button>
<.button size="sm" variant="outline" phx-click="push-toggle" phx-value-item="p1">
  Toggle "First"
</.button>
<.button size="sm" variant="outline" phx-click="push-close" phx-value-item="p1">
  Close "First"
</.button>

<.accordion id="push-faq" type="single" collapsible>
  <.accordion_item value="p1">
    <.accordion_trigger>First item</.accordion_trigger>
    <.accordion_content>
      Opened by the server via push_event with command "open".
    </.accordion_content>
  </.accordion_item>
  <.accordion_item value="p2">
    <.accordion_trigger>Second item</.accordion_trigger>
    <.accordion_content>
      The server can open, close, or toggle any item by pushing a command.
      No re-render needed — the hook handles it client-side.
    </.accordion_content>
  </.accordion_item>
</.accordion>