PineUiPhoenix.Components.Accordion (Pine UI v0.2.1)

Copy Markdown View Source

Stacked, collapsible content panels.

A port of the Pines accordion.

<.accordion>
  <:item title="Is it accessible?">Yes. It follows the WAI-ARIA disclosure pattern.</:item>
  <:item title="Is it styled?">Yes, with Tailwind.</:item>
</.accordion>

By default only one panel is open at a time, matching Pines. Pass multiple to allow several.

Summary

Disclosure

accordion(assigns)

Renders an accordion.

Disclosure

accordion(assigns)

Renders an accordion.

Accessibility

Follows the WAI-ARIA disclosure pattern: each trigger is a <button> carrying aria-expanded and aria-controls, and each panel is aria-labelledby its trigger.

Note that aria-expanded is bound with x-bind:aria-expanded so it tracks the real state. Prior to v0.2.0 this component emitted the literal string aria-expanded="x-bind:aria-expanded='open'", which screen readers announced verbatim.

Panel ids are derived from the component's id, so multiple accordions can share a page — v0.1.x hardcoded id="accordion-content" on every instance.

Attributes

  • id (:string) - Defaults to nil.

  • multiple (:boolean) - Allow more than one panel open at once. Defaults to false.

  • default_open (:integer) - Zero-based index of the panel to open initially. nil opens none. Defaults to nil.

  • animate (:string) - transition uses x-transition and needs nothing beyond Alpine core. collapse gives a true height animation but requires the Alpine Collapse plugin — the component will not animate without it. none disables animation.

    Defaults to "transition". Must be one of "transition", "collapse", or "none".

  • class (:string) - Defaults to nil.

  • Global attributes are accepted.

Slots

  • item (required) - Accepts attributes:
    • title (:string) (required)
    • subtitle (:string)
    • disabled (:boolean)