LanternUI.Components.Accordion (LanternUI v0.8.2)

Accordion — a WAI-ARIA APG accordion with the Fluxon 2.3.1 composition API.

<.accordion id="faq">
  <.accordion_item id="shipping" expanded>
    <:header>Shipping</:header>
    <:panel>We ship worldwide.</:panel>
  </.accordion_item>
  <.accordion_item id="returns" icon={false}>
    <:header class="font-bold">Returns</:header>
    <:panel class="prose">Thirty days, no questions asked.</:panel>
  </.accordion_item>
</.accordion>

The server renders the complete accessible anatomy and initial state. The LanternAccordion hook owns toggling, single/multiple-open enforcement, and the optional ArrowUp/ArrowDown/Home/End header navigation from the APG. Panels remain in the DOM and use hidden when collapsed, keeping ARIA idrefs valid while removing collapsed content from the tab order and accessibility tree. Hook-owned state is restored after LiveView patches.

Summary

Functions

accordion(assigns)

accordion_item(assigns)

Functions

accordion(assigns)

Attributes

id (:string) - Stable accordion id. A unique id is generated when omitted.
class (:any) - Extra classes merged onto the accordion root. Defaults to nil.
multiple (:boolean) - Allow more than one item to be expanded at once. Defaults to false.
prevent_all_closed (:boolean) - Keep at least one enabled item expanded. Defaults to false.
animation_duration (:integer) - Expand/collapse indicator transition duration in milliseconds. Defaults to 300.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

inner_block (required) - One or more accordion_item/1 components.

accordion_item(assigns)

Attributes

id (:string) - Stable item id used to connect its header and panel. A unique id is generated when omitted.
class (:any) - Extra classes merged onto the item root. Defaults to nil.
expanded (:boolean) - Whether this item starts expanded. Defaults to false.
icon (:boolean) - Whether to render the built-in chevron. Defaults to true.
Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

header (required) - Always-visible header content. Accepts attributes:
- class (:any) - Extra classes merged onto the header button.
panel (required) - Expandable panel content. Accepts attributes:
- class (:any) - Extra classes merged onto the panel content wrapper.