CSS only

Collapse

A height-animated disclosure: any trigger with data-ng-toggle="#id" opens and closes a ng-collapse target. Link ng_toggle.js.

The CSS is two lines — height: 0, overflow: hidden, a height transition; the JS measures scrollHeight and animates to it, then parks the height on auto so the content can reflow. The trigger gets aria-controls/aria-expanded and responds to Enter and Space. The target must have the ng-collapse class — the toggle refuses anything else.

Basic

This block slides open and closed with a height transition.

collapse.html

<button type="button" class="ng-btn ng-btn-primary mb-16" data-ng-toggle="#demo-details">
    <i class="ph ph-caret-down"></i> Details
</button>
<div id="demo-details" class="ng-collapse">
    <div class="ng-alert ng-alert-info">
        <span class="ng-alert-icon"><i class="ph ph-info"></i></span>
        <div class="ng-alert-body">
            <div class="ng-alert-desc">This block slides open and closed with a height transition.</div>
        </div>
    </div>
</div>

Open by default

Give the target is-open in the markup and the JS mounts it expanded.

collapse.html

<button type="button" class="ng-btn ng-btn-primary-outline mb-16" data-ng-toggle="#demo-open">
    <i class="ph ph-caret-down"></i> Starts open
</button>
<div id="demo-open" class="ng-collapse is-open">
    <p>Give the target <code>is-open</code> in the markup and the JS mounts it expanded.</p>
</div>

Persisted state

Add data-ng-state + data-state-id to the trigger and the open/closed flag survives reloads through ng.state:

Open this, reload the page: it comes back open. The trigger persists the open/closed flag in ng.state under docs:collapse-demo.

collapse.html

<button type="button" class="ng-btn ng-btn-primary-soft mb-16"
        data-ng-toggle="#demo-persist"
        data-ng-state
        data-state-id="docs:collapse-demo">
    <i class="ph ph-caret-down"></i> Remembers its state
</button>
<div id="demo-persist" class="ng-collapse">
    <p>Open this, reload the page: it comes back open. The trigger persists the
       open/closed flag in <code>ng.state</code> under <code>docs:collapse-demo</code>.</p>
</div>

Collapsible panel

ng-panel-collapsible reuses the same mechanics with zero extra JS: the panel head is the trigger, the body sits inside the ng-collapse, and the ng-panel-toggle-icon caret rotates with aria-expanded:

Filters

collapse.html

<div class="ng-panel ng-panel-collapsible">
    <div class="ng-panel-head" data-ng-toggle="#panel-filters" tabindex="0">
        <span class="ng-panel-title"><i class="ph ph-funnel"></i> Filters</span>
        <i class="ph ph-caret-down ng-panel-toggle-icon"></i>
    </div>
    <div id="panel-filters" class="ng-collapse">
        <div class="ng-panel-body">
            <ul class="ng-list divided">
                <li class="ng-list-item"><i class="ph ph-calendar-blank text-mute"></i> Last 30 days</li>
                <li class="ng-list-item"><i class="ph ph-tag text-mute"></i> Category: all</li>
                <li class="ng-list-item"><i class="ph ph-user text-mute"></i> Owner: anyone</li>
            </ul>
        </div>
    </div>
</div>

Options

`data-ng-toggle`	Selector of the `ng-collapse` target (on the trigger).
`data-ng-toggle-class`	Class toggled on the target (default `is-open`).
`data-ng-state` + `data-state-id`	Persist the open/closed flag in `ng.state` (optional `data-state-prop` for a property inside the key).
`is-open` on the target	Mounts expanded.

The toggle dispatches no custom events — observe aria-expanded on the trigger, or the persisted key via ng.state.watch().

Anatomy

ng-collapse data-ng-toggle="#id" data-ng-toggle-class is-open aria-expanded aria-controls

Panel variant

ng-panel ng-panel-collapsible ng-panel-head ng-panel-title ng-panel-toggle-icon ng-panel-body

Reference

Generated from the component source (_ng_collapse.scss · ng_toggle.js).

Component info

Name	`Collapse`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_collapse.scss`

Classes

.ng-collapse