Shadix.Components.Collapsible (shadix v0.0.1)

Copy Markdown View Source

An interactive disclosure that shows or hides a region of content.

Unlike the React/Radix original, this is a portal-free, client-driven collapsible. The trigger's phx-click runs Phoenix.LiveView.JS.toggle/1 to flip the content's visibility with no server round-trip. A small ShadixCollapsible hook (assets/ts/collapsible.ts) on the trigger watches the content's visibility and mirrors it onto the trigger as aria-expanded and data-state (open / closed) so assistive tech and data-state-based styles stay in sync — something JS alone can't express here.

The trigger and content derive their ids from the required :id, so aria-controls wires the button to the "<id>-content" element stably.

Summary

Functions

Renders a collapsible region with a :trigger slot and collapsible content.

Functions

collapsible(assigns)

Renders a collapsible region with a :trigger slot and collapsible content.

The :trigger slot's contents are placed inside a <button> that toggles the content. Pass open to render initially expanded.

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.

Slots

  • trigger (required)
  • inner_block (required)