Usage

Attributes

• is-collaped: Boolean (optional, defaults to false) Defines the initial state of the collapsible container.
• on-collapse: Function (optional) Callback function used to report the state of the collapsible component.

Default

The collapsible container provides a simple. reusable container that surrounds a bit of content with a clickable header that collapses the content underneath.

HTML

<div ng-controller="CollapsibleContainerExampleController as ccctrl">
    <collapsible-container is-collapsed="false" on-collapse="ccctrl.onCollapse.bind(ccctrl)">
        <collapsible-header class="u-flex u-flexSpaced">
            <div class="u-flex u-mt++">
                TV: Starter
            </div>
            <div class="t-content">
                <inv-stepper
                    value="ccctrl.value"
                    is-disabled="ccctrl.isDisabled"
                    disabled-message="ccctrl.disabledMessage">
                </inv-stepper>
            </div>
        </collapsible-header>
        <collapsible-content class="u-flex u-flexColumn">
            <div class="u-flex u-flexSpaced u-mb">
                <div>Mobile Activation</div>
                <div class="u-flex u-flexEnd">
                    <div style="color: #868686; text-decoration: line-through" class="u-mr">$20.00</div>
                    <div >$10.00</div>
                </div>
            </div>
            <div class="u-flex u-flexSpaced u-mb" >
                <div style="color: #868686">Minimum:1 Maximum: 4</div>
                <div style="color: RED">($10.00)</div>
            </div>
            <div class="u-size3of4 t-content">
                <div smart-truncate allow-read-more="true" char-count="50" ng-bind="ccctrl.text" style="display: inline"></div>
            </div>
        </collapsible-content>
    </collapsible-container>
    Is Collapsed: <span ng-bind="ccctrl.collapsed"></span>
</div>
<style>
    .u-readMore, .u-readLess {
        display: inline;
    }
</style>

With Toggle elements

Add "collapsible-toggle" attribute to a element to make it clickable to toggle collapse state.

HTML

<collapsible-container is-collapsed="false" on-collapse="ccctrl.onCollapse.bind(ccctrl)">
    <collapsible-header>
        <div collapsible-toggle class="u-pt++">
            Clickable Title
        </div>
    </collapsible-header>
    <collapsible-content class="u-p++ u">
        Collapsible Contents
    </collapsible-content>
</collapsible-container>