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

LineOne's accordion and collapse: a list of sections that open under their titles, in LineOne's
six styles (basic, border bottom, full bordered, divided items, primary, advanced).

    <.accordion id="faq" variant="bordered">
      <.accordion_item id="faq-1" title="Accordion Item 1" open>
        <p>Lorem ipsum dolor sit amet.</p>
      </.accordion_item>
      <.accordion_item id="faq-2" title="Accordion Item 2">…</.accordion_item>
    </.accordion>

    <.accordion id="help" variant="primary" color="warning">…</.accordion>

One section is open at a time; `multiple` lets them open independently (LineOne's Collapse
page). The `advanced` style puts a header of your own in each item, with the chevron button
at its end:

    <.accordion id="people" variant="advanced">
      <.accordion_item id="simon">
        <:header><.avatar …/> Simon Tods</:header>
        …
      </.accordion_item>
    </.accordion>

Each item is a `LineaUI.Components.Collapse`: the browser owns which sections are open, the
server's `open` wins when it changes, `LineaUI.open/close/toggle("faq-1")` work, and
`on_open` / `on_close` push `%{"id" => item_id}` when they are event names.

# `accordion`

Groups accordion items and gives them their style.

    <.accordion id="faq" variant="divided" multiple>
      <.accordion_item id="q1" title="Question">Answer</.accordion_item>
    </.accordion>

## Attributes

* `id` (`:string`) (required)
* `variant` (`:string`) - LineOne's sections: `basic`, `border-bottom`, `bordered` (full bordered), `divided` (items apart), `primary`, `advanced` (a header slot per item). Defaults to `"basic"`. Must be one of `"advanced"`, `"basic"`, `"border-bottom"`, `"bordered"`, `"divided"`, or `"primary"`.
* `color` (`:string`) - The `primary` style's frame, dividers and header fill: LineOne's blue by default, or any theme color (the Help page's yellow and sky frames). Defaults to `"primary"`. Must be one of `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `multiple` (`:boolean`) - Sections open independently (LineOne's Collapse). Defaults to `false`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `accordion_item`

A section of an accordion: its title (or `:header` in the `advanced` style) and its content.

    <.accordion_item id="q1" title="Accordion Item 1" on_open="q1-opened">
      <p>Lorem ipsum.</p>
    </.accordion_item>

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

## Attributes

* `id` (`:string`) (required)
* `title` (`:string`) - Defaults to `nil`.
* `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`) - Defaults to `nil`.
* `toggle_label` (`:string`) - The accessible name of the `:header` chevron button. Defaults to `"Toggle"`.
* `class` (`:any`) - Merged into the item. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `header` - A header of your own, with the chevron button at its end (LineOne's Advanced).
* `inner_block` (required)

---

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