Accordion
Stacked, collapsible panels. Each ng-accordion-item pairs a ng-accordion-trigger with a ng-accordion-content that animates open. Mounts itself — link ng_accordion.js.
Mark an item is-open to start expanded. By default multiple items can be open at once; add single-open on the root to keep only one open at a time. Each item is premium by default — a raised surface with a brand ring and inset highlight (soft shadow in light, brand glow + deeper shadow in dark).
Basic (multi-open)
A CSS + JS framework with ready components and design tokens.
No — link the files and write ng- classes.
Yes, via a single data-theme attribute.
<div class="ng-accordion">
<div class="ng-accordion-item is-open">
<button type="button" class="ng-accordion-trigger">
<span>What is Nexigrid?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>A CSS + JS framework with ready components and design tokens.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Do I need a build step?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>No — link the files and write ng- classes.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Is dark mode included?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>Yes, via a single data-theme attribute.</p>
</div>
</div>
</div>Single-open
With single-open, opening a panel closes the others.
A CSS + JS framework with ready components and design tokens.
No — link the files and write ng- classes.
Yes, via a single data-theme attribute.
<div class="ng-accordion single-open">
<div class="ng-accordion-item is-open">
<button type="button" class="ng-accordion-trigger">
<span>What is Nexigrid?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>A CSS + JS framework with ready components and design tokens.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Do I need a build step?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>No — link the files and write ng- classes.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Is dark mode included?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>Yes, via a single data-theme attribute.</p>
</div>
</div>
</div>Compact
Add compact for tighter spacing.
A CSS + JS framework with ready components and design tokens.
No — link the files and write ng- classes.
Yes, via a single data-theme attribute.
<div class="ng-accordion compact">
<div class="ng-accordion-item is-open">
<button type="button" class="ng-accordion-trigger">
<span>What is Nexigrid?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>A CSS + JS framework with ready components and design tokens.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Do I need a build step?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>No — link the files and write ng- classes.</p>
</div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span>Is dark mode included?</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content">
<p>Yes, via a single data-theme attribute.</p>
</div>
</div>
</div>Rich triggers
The trigger is justify-content: space-between, so markup order decides the layout — usually a leading icon + label on the left and the chevron on the right. Add anything in between (a badge, a count).
You have 3 unread notifications.
Account and preferences.
<div class="ng-accordion single-open">
<div class="ng-accordion-item is-open">
<button type="button" class="ng-accordion-trigger">
<span><i class="ph ph-bell"></i> Notifications</span>
<span style="display:inline-flex;align-items:center;gap:.6rem"><span class="ng-badge ng-badge-danger-soft">3</span><i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i></span>
</button>
<div class="ng-accordion-content"><p>You have 3 unread notifications.</p></div>
</div>
<div class="ng-accordion-item">
<button type="button" class="ng-accordion-trigger">
<span><i class="ph ph-gear"></i> Settings</span>
<i class="ng-accordion-icon ph ph-caret-down" aria-hidden="true"></i>
</button>
<div class="ng-accordion-content"><p>Account and preferences.</p></div>
</div>
</div>Anatomy
ng-accordion ng-accordion-item ng-accordion-trigger ng-accordion-content ng-accordion-icon Modifiers & state
single-open compact is-open Reference
Generated from the component source (_ng_accordion.scss · ng_accordion.js).
Component info
| Name | accordion |
|---|---|
| Type | css+js |
| Version | css 1.1.1 · js 1.0.0 |
| Status | stable |
| CSS | /assets/css/components/_ng_accordion.scss |
| JS | /assets/js/ng_accordion.js |
Classes
.ng-accordion .ng-accordion-content .ng-accordion-icon .ng-accordion-item .ng-accordion-trigger Tokens
--ng-acc-bg --ng-acc-border --ng-acc-content-padding-x --ng-acc-content-padding-y --ng-acc-gap --ng-acc-max-height --ng-acc-radius --ng-acc-transition-speed --ng-acc-trigger-hover-bg --ng-acc-trigger-padding-x --ng-acc-trigger-padding-y