# `LineaUI.Components.Collapse`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/collapse.ex#L1)

A section that opens and closes under its trigger, with LineOne's 200ms height animation. It is
the piece LineOne's Collapse and Accordion pages are built from (see `LineaUI.Components.Accordion`).

    <.collapse id="details">
      <:trigger class="flex items-center justify-between py-4 font-medium">Shipping details</:trigger>
      <p>Ships in two days.</p>
    </.collapse>

`chevron` adds the rotating chevron LineOne's panels use at the end of the trigger:

    <.collapse id="files" open chevron="down">
      <:trigger class="px-4 text-xs font-medium uppercase">My files</:trigger>
      …
    </.collapse>

It is a native `<details>`: the trigger works with the mouse and the keyboard and the browser
owns `open`, which survives patches. When the server changes `open`, the server wins.
`LineaUI.open/close/toggle("details")` (and their socket forms) open and close it too, and
`on_open` / `on_close` run on every toggle; as event names they push `%{"id" => id}` to the
LiveView (or `target`).

# `collapse`

Renders a collapsible section.

    <.collapse id="faq-1" open on_close="faq-closed">
      <:trigger>Can I pay later?</:trigger>
      Yes, within 30 days.
    </.collapse>

Events: `on_open` and `on_close` push `%{"id" => id}` when they are event names.

## Attributes

* `id` (`:string`) (required)
* `open` (`:boolean`) - Defaults to `false`.
* `on_open` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `on_close` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_open` / `on_close` events. Defaults to `nil`.
* `chevron` (`:string`) - Draws a chevron at the end of the trigger (which becomes a flex row with `justify-between`). `down` turns upside down while open, `right` turns down. Defaults to `nil`. Must be one of `nil`, `"down"`, or `"right"`.
* `chevron_class` (`:any`) - Merged into the chevron's `<svg>`. Defaults to `nil`.
* `class` (`:any`) - Merged into the `<details>`. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `trigger` (required) - Accepts attributes:

  * `class` (`:any`) - Classes of the `<summary>`.
* `inner_block` (required)

---

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