Accordion

Organizes related content into expandable and collapsible sections, allowing users to reveal or hide information as needed while keeping the interface clean and compact.

Usage

Use accordions to group related content that doesn’t need to be visible all at once, such as FAQs, settings panels, or detailed lists. Section headers must be clear and descriptive. Avoid nesting too many accordions, as excessive collapsible layers can reduce usability and overwhelm users.

API Reference

Component attribute(s)

x-h-accordion
x-h-accordion-item
x-h-accordion-trigger
x-h-accordion-content

Attributes

x-h-accordion

Attribute	Type	Required	Description
data-size	default md sm	false	Height of the accordion header items.

x-h-accordion-item

Attribute	Type	Required	Description
self	string	false	Sets the ID of the item. Expects a string literal or a reference to a variable. Useful when setting the default expanded item.

x-h-accordion-trigger

Attribute	Type	Required	Description
self	string	true	Sets the title of the item. Expects a string literal or a reference to a variable.

Modifiers

x-h-accordion

Modifier	Type	Required	Description
single	string	false	Used when the accordion must show only one section at a time. Optionally, the id of the item that should be expanded by default can be set. Expects a string literal or a reference to a variable.

x-h-accordion-item

Modifier	Type	Required	Description
default	string	false	Accordion items are collapsed by default. If included, the item will be expanded by default. There can be only one default.

Data Slots

Slot	Element
accordion	x-h-accordion
accordion-item	x-h-accordion-item
accordion-header	x-h-accordion-trigger
accordion-trigger	Button created by x-h-accordion-trigger
accordion-content	x-h-accordion-content

Examples

Show only one section at a time

<div x-h-accordion.single="'itemId2'">
  <div x-h-accordion-item="'itemId1'">
    <h3 x-h-accordion-trigger="'Accordion Item 1'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div x-h-accordion-item="'itemId2'">
    <h3 x-h-accordion-trigger="'Accordion Item 2'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Dynamic items

Because the item id is evaluated, items rendered with x-for can take their id from the iterated data, which keeps single mode working.

<div
  x-data="{
    faq: [
      { id: 'faq-1', question: 'What is Harmonia?', answer: 'A UI component library for Alpine.js, built with Tailwind CSS.' },
      { id: 'faq-2', question: 'How do I install it?', answer: 'Add the harmonia.js script and the harmonia.css stylesheet to your page, after Alpine.js.' },
      { id: 'faq-3', question: 'Does it support dark mode?', answer: 'Yes, every component adapts to light and dark mode automatically.' }
    ]
  }"
  x-h-accordion.single
>
  <template x-for="entry in faq" :key="entry.id">
    <div x-h-accordion-item="entry.id">
      <h3 x-h-accordion-trigger="entry.question"></h3>
      <div x-h-accordion-content x-text="entry.answer"></div>
    </div>
  </template>
</div>

Default section

<div x-h-accordion>
  <div x-h-accordion-item>
    <h3 x-h-accordion-trigger="'Accordion Item 1'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div x-h-accordion-item.default>
    <h3 x-h-accordion-trigger="'Accordion Item 2'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Medium size

<div x-h-accordion data-size="md">
  <div x-h-accordion-item>
    <h3 x-h-accordion-trigger="'Accordion Item 1'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div x-h-accordion-item>
    <h3 x-h-accordion-trigger="'Accordion Item 2'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Small size

<div x-h-accordion data-size="sm">
  <div x-h-accordion-item>
    <h3 x-h-accordion-trigger="'Accordion Item 1'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div x-h-accordion-item>
    <h3 x-h-accordion-trigger="'Accordion Item 2'"></h3>
    <div x-h-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>