stable 1.0.0

Toggle

A trigger that expands and collapses a target. Put data-ng-toggle="#id" on any element; it animates a Collapse (ng-collapse) open and closed. Link ng_toggle.js.

The trigger points to its target by selector. The target must be a ng-collapse container (its height is driven inline by the script). On click the target gets is-open and animates from 0 to its content height.

Basic

Collapsible content. The trigger toggles its height with a smooth animation.

toggle.html
<button class="ng-btn ng-btn-primary-outline" data-ng-toggle="#demo-collapse" aria-expanded="false">
    Toggle details
</button>

<div class="ng-collapse" id="demo-collapse">
    <div class="pxy-16">
        <p>Collapsible content. The trigger toggles its height with a smooth animation.</p>
    </div>
</div>

Initially open

Add is-open (and height: auto) on the target to start expanded.

Start expanded by adding is-open on the target.

toggle.html
<button class="ng-btn ng-btn-primary-outline" data-ng-toggle="#demo-open" aria-expanded="true">
    Toggle details
</button>

<div class="ng-collapse is-open" id="demo-open" style="height: auto">
    <div class="pxy-16">
        <p>Start expanded by adding <code>is-open</code> on the target.</p>
    </div>
</div>

Anatomy

data-ng-toggle="#id" ng-collapse is-open

Options

data-ng-toggle-class changes the state class applied to the target (default is-open). State integration via data-ng-state / data-state-id.

Reference

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

Component info

Nametoggle
Typecss+js
Version1.0.0
Statusstable
CSS/assets/css/components/_ng_toggle.scss
JS/assets/js/ng_toggle.js

Classes

.ng-toggle-target