stable 1.0.0

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.

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.

accordion.html

<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.

accordion.html

<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.

accordion.html

<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>

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	`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