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
Attributes
id(:string) (required)open(:boolean) - initial state only — client-owned after mount. Defaults tofalse.class(:any) - extra classes on the <details>. Defaults tonil.title_class(:any) - extra classes on the summary. Defaults tonil.cue(:boolean) - opt intoPhoenixKitWeb.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 tofalse.cue_label(:string) - wording for that marker (default "Updated"). Defaults tonil.
Slots
title(required)content(required)