# `PetalComponents.Accordion`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/accordion.ex#L1)

# `accordion`

## Attributes

* `container_id` (`:string`)
* `class` (`:any`) - CSS class for parent container. Defaults to `nil`.
* `entries` (`:list`) - Defaults to `[%{}]`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"ghost"`.
* `js_lib` (`:string`) - JavaScript library used for toggling. Defaults to `"alpine_js"`. Must be one of `"alpine_js"`, or `"live_view_js"`.
* `open_index` (`:integer`) - Index of item to be open at render. Defaults to `nil`.
* `multiple` (`:boolean`) - When true, multiple sections can be expanded simultaneously. Defaults to `false`.
* `on_toggle` (`Phoenix.LiveView.JS`) - additional JS commands to run when an accordion section is toggled (LiveView.JS only). Defaults to `%Phoenix.LiveView.JS{ops: []}`.
* Global attributes are accepted.
## Slots

* `item` (required) - CSS class for parent container. Accepts attributes:

  * `heading` (`:string`)

---

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