# `PhoenixKitWeb.Components.Core.Accordion`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v2.2.0/lib/phoenix_kit_web/components/core/accordion.ex#L1)

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.

# `accordion`

## 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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*