Accordion

Expandable content sections with smooth height animation.

Default (single open)

SoftUI is a neumorphic CSS component library with soft shadows, rounded surfaces, and gentle depth. It includes dark mode, utility classes, and a small JS module for interactive behaviors.
The accordion requires softui.js for expand/collapse behavior.
Yes. SoftUI uses CSS custom properties for colors, shadows, border-radius, and more. Override the variables on :root to theme everything at once.
<div class="sui-accordion">
  <div class="sui-accordion-item active">
    <button type="button" class="sui-accordion-header">What is SoftUI?</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        SoftUI is a neumorphic CSS component library...
      </div>
    </div>
  </div>
  <div class="sui-accordion-item">
    <button type="button" class="sui-accordion-header">Do I need JavaScript?</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        The accordion requires softui.js...
      </div>
    </div>
  </div>
</div>

Multi-open

This accordion allows multiple items to be open at the same time. Add data-sui-multi to the container to enable this behavior.
Both this section and the one above can stay open simultaneously. Click either header to toggle it independently.
This section starts closed but can be opened without closing the others.
<div class="sui-accordion" data-sui-multi>
  <div class="sui-accordion-item active">
    <button type="button" class="sui-accordion-header">Section One</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">...</div>
    </div>
  </div>
  <div class="sui-accordion-item active">
    <button type="button" class="sui-accordion-header">Section Two</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">...</div>
    </div>
  </div>
</div>

With nested content

Email notifications
Push notifications 
<div class="sui-accordion">
  <div class="sui-accordion-item">
    <button type="button" class="sui-accordion-header">Account Settings</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        <!-- Any HTML content works here -->
        <input type="text" class="sui-input" placeholder="Name">
      </div>
    </div>
  </div>
</div>

Flush

Flush accordions have no background or shadow, just simple dividers between items.
Use flush accordions when you want the content to blend seamlessly into the surrounding layout without raised card styling.
Add the sui-accordion-flush modifier class alongside sui-accordion on the container element.
<div class="sui-accordion sui-accordion-flush">
  <div class="sui-accordion-item active">
    <button type="button" class="sui-accordion-header">What is a flush accordion?</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        Flush accordions have no background or shadow, just simple dividers between items.
      </div>
    </div>
  </div>
  <div class="sui-accordion-item">
    <button type="button" class="sui-accordion-header">When should I use it?</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        Use flush accordions when you want the content to blend seamlessly...
      </div>
    </div>
  </div>
  <div class="sui-accordion-item">
    <button type="button" class="sui-accordion-header">How do I enable it?</button>
    <div class="sui-accordion-body">
      <div class="sui-accordion-body-inner">
        Add the sui-accordion-flush modifier class alongside sui-accordion.
      </div>
    </div>
  </div>
</div>

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.