Accordion

Expandable accordion panels.

Basic accordion

Add na-accordion on the wrapper. Items expand on trigger click and collapse each other by default.

naUI is a lightweight, zero-dependency CSS framework for building clean interfaces.

Yes - naUI is open-source and free for personal and commercial use under the MIT licence.

No build step required. Link the CSS and JS directly from a CDN and start using it.

<div class="na-accordion" na-accordion>
  <div class="na-accordion-item">
    <button class="na-accordion-trigger">
      Question one
      <span class="na-accordion-icon"></span>
    </button>
    <div class="na-accordion-panel">
      <div class="na-accordion-body">
        Answer content.
      </div>
    </div>
  </div>
  <!-- more items… -->
</div>

Flush (no borders)

No outer borders or background.

Content of item two.

<div class="na-accordion na-accordion-flush" na-accordion>
  ...
</div>

Default open item

<!-- Add na-open to the item to pre-expand it on load -->
<div class="na-accordion-item na-open">
  ...
</div>

Class reference

Class / Attribute	Description
`na-accordion`	Wrapper element
`na-accordion-flush`	Removes outer border/shadow
`na-accordion-item`	Individual collapsible row
`na-accordion-trigger`	Clickable header button
`na-accordion-icon`	Animated chevron indicator
`na-accordion-panel`	Collapsible content wrapper
`na-accordion-body`	Inner padding layer
`na-open`	Expands the item