PhoenixKitWeb.Components.Core.Accordion (phoenix_kit v2.5.0)

Copy Markdown View Source

Collapsible content section on the native <details> element + daisyUI collapse styling.

The browser owns the open/closed state: the summary click toggles natively (instant, no round trip) and daisyUI 5 animates the reveal via its ::details-content height transition. JS.ignore_attributes marks open as client-owned on mount, so LiveView patches never reset a section the user toggled — the historic "accordion slams shut on the next update" morphdom bug.

open sets only the INITIAL state (server changes to it after mount are ignored by design). To open a section from elsewhere in the page, set the attribute client-side:

<button type="button" phx-click={JS.set_attribute({"open", ""}, to: "#advanced")}>
  Show advanced settings
</button>

Works without JavaScript (native <details> on dead renders).

Closing a section near the bottom of a long page would shrink the document out from under the reader and jump the viewport upward; the collapse scroll keeper in priv/static/assets/phoenix_kit.js holds the page height instead, so the reader stays put. It keys off class="collapse" on the <details>, which this component always emits.

Summary

Functions

accordion(assigns)

Attributes

  • id (:string) (required)
  • open (:boolean) - initial state only — client-owned after mount. Defaults to false.
  • class (:any) - extra classes on the <details>. Defaults to nil.
  • title_class (:any) - extra classes on the summary. Defaults to nil.
  • cue (:boolean) - opt into PhoenixKitWeb.Components.Core.ChangeCue: the section can be highlighted when something inside it changes while the reader is elsewhere, and carries a quiet marker until they open it. Defaults to false.
  • cue_label (:string) - wording for that marker (default "Updated"). Defaults to nil.

Slots

  • title (required)
  • content (required)