Collapsible Panel In Angular
source link: https://imnisen.github.io/collapsible-panel-in-angular.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Collapsible Panel In Angular
1 Summary
This article record a trick in angularjs to make collapsible panel.
Enviroment : angularjs 1.4.6, safari in iphone, ubuntu 14.04
2 Implement
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 :)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK