Collapsible Panel In Angular

This article record a trick in angularjs to make collapsible panel.

Enviroment : angularjs 1.4.6, safari in iphone, ubuntu 14.04

Generally, collapsible panel can be genearte like following:

<!-- Need some style to be nice -->

<div>
    <div name="toggle">
        <a ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
            <p>Expand/Contract </p>
        </a>

    </div>

    <div name="collapsedPanel" collapse="isCollapsed">

        <!-- some panel need collapsed here-->

    <div>
</div>

This makes when you click "Expand/Contract", the "collapsedPanel" div will show off or disappear smoothly.

But when I need click the "Contract" at the bottom of the "collapsedPanel" div, not the same place as the "Expand", it means, when I click "Expand", the "collapsedPanel" will show up, the "expand" div disappear and the "extract" div will show up, and when I click "Contract", it do the reverse actions.

Firstly, I implement it as bellow:

<!-- Need some style to be nice -->
<div>
    <div ng-show="isCollapsed" name="expand">
        <a ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
            <p>Expand</p>
        </a>

    </div>

    <div name="collapsedPanel" collapse="isCollapsed">

        <!-- some panel need collapsed here-->



        <div ng-hide="isCollapsed" name="contract">
            <a ng-click="isCollapsed = !isCollapsed">
                <p>Contract</p>
            </a>

        </div>

    <div>
</div>

Code above can realize funtions, but the click "Contract" animation is not smoothly (because the "expand" div shows suddendly?).

After a while of confusing how to make it somoothly, I image the Expand and Contract animation, I realize I can put the "expand" div under the "collapsedPanel" div! So, it can relise, when I click "Expand", the "collapsedPanel" will show up, the "expand" div disappear and the "extract" div will show up, and when I click "Contract", it do the reverse actions smoothly, like following code:

<!-- Need some style to be nice -->
<div>

    <div name="collapsedPanel" collapse="isCollapsed">

        <!-- some panel need collapsed here-->

    <div>


    <div>
        <a ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
            <p ng-show="isCollapsed">Expand</p>
            <p ng-hide="isCollapsed">Contract</p>
        </a>
    </div>


</div>

Aha, that's good~

There may be other ways to acheive this, tell me if you konw :)