# Props

Prop	Type	Default	Values	Description	Component
id	string	-	any	Unique ID	x-accordion with aware: or on each x-accordion.item without aware:
flush	boolean	false	true|false	Add .accordion-flush style	x-accordion
alwaysOpen	boolean	false	true|false	Keep accordion items open when another is opened	x-accordion with aware: or on each x-accordion.item without aware:
name	string	-	any	Optional used as unique ID for accordion item	x-accordion.item
open	boolean	false	true|false	Show accordion item	x-accordion.item
title	string	-	any	Accordion item title	x-accordion.item

---

# Default

It's important to prepend aware: to the prop id so that the component x-accordion.item has access to the id in order to set the data-bs-parent in the .accordion-collapse element.

You don't need to set the id of x-accordion.item as this will be generated. But in case you want, you can use the prop name . It should be a valid selector name.

Use prop open to keep accordion item open.

<x-accordion aware:id="first-accordion">
  <x-accordion.item title="First item" open>
    First accordion item content
  </x-accordion.item>

  <x-accordion.item title="Second item">
    Second accordion item content
  </x-accordion.item>

  <x-accordion.item title="Third item">
    Third accordion item content
  </x-accordion.item>
</x-accordion>

---

# Prop flush

Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

<x-accordion aware:id="second-accordion" flush>
  ...
</x-accordion>

---

# Prop alwaysOpen

With prop alwaysOpen you can omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened. The prop must have aware: as it's being used by x-accordion.items . Alternative way is to set the prop alwaysOpen without the aware: to each x-accordion.item .

<x-accordion aware:id="third-accordion" aware:alwaysOpen>
  ...
</x-accordion>

<!-- or -->

<x-accordion aware:id="third-accordion">
  <x-accordion.item title="First item" alwaysOpen>
    ...
  </x-accordion.item>
  ...
</x-accordion>