Accordion

Collapsible content sections using native <details>/<summary>. Requires the nanoui-accordion Stimulus controller for single-open mode.

Example

Is it free?

Yes, NanoUI is MIT licensed and free to use.

Does it require a build step?

No, it's vanilla CSS with optional Stimulus controllers.

Can I customize the colors?

Yes, edit base/03_colors.css to change the entire palette.

<div class="nano-accordion"
     data-controller="nanoui-accordion"
     data-nanoui-accordion-single-value="true">

  <details class="nano-accordion__item"
           data-nanoui-accordion-target="item"
           data-action="toggle->nanoui-accordion#toggle"
           open>
    <summary class="nano-accordion__trigger">
      <span>Is it free?</span>
      <svg class="nano-accordion__icon" ...><path d="m6 9 6 6 6-6"/></svg>
    </summary>
    <div class="nano-accordion__content">
      <p>Yes, NanoUI is MIT licensed and free to use.</p>
    </div>
  </details>

  <details class="nano-accordion__item" ...>
    <!-- more items -->
  </details>
</div>

Stimulus controller

Targets: item (<details> elements)
Values: single (Boolean, default false — only one open at a time)
Actions: toggle(event) — closes other items when single mode is enabled
Uses native <details>/<summary> for built-in toggle behavior