I am using the Angular UI accordion and I am trying to add a toggle button that will expand and collapse the panels. At present the panels will only open when a user clicks on the heading. The button I added toggles a variable 'isopen' to true or false but it does not seem to work.
Here is my code:
<button ng-click="isopen =!isopen">expand/collapse</button> {{isopen}}
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="site in groups">
<accordion-heading ng-click="isopen = !isopen">
hey {{isopen}}
</accordion-heading>
hello
</accordion-group>
</accordion>
And here is a plunker:
When a user clicks on a panel header it should open that panel only. The Toggle button will hopefully expand and collapse them all.
I am using the Angular UI accordion and I am trying to add a toggle button that will expand and collapse the panels. At present the panels will only open when a user clicks on the heading. The button I added toggles a variable 'isopen' to true or false but it does not seem to work.
Here is my code:
<button ng-click="isopen =!isopen">expand/collapse</button> {{isopen}}
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="site in groups">
<accordion-heading ng-click="isopen = !isopen">
hey {{isopen}}
</accordion-heading>
hello
</accordion-group>
</accordion>
And here is a plunker:
http://plnkr.co/edit/8AkWUxzOir5NNoA0fT5R?p=preview
When a user clicks on a panel header it should open that panel only. The Toggle button will hopefully expand and collapse them all.
Share Improve this question edited Aug 21, 2018 at 22:14 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Apr 21, 2015 at 9:48 Jose the hoseJose the hose 1,89510 gold badges33 silver badges58 bronze badges1 Answer
Reset to default 5Your $scope changes inside accordion. Solution is attach this property in an object on $scope.
See working fiddle here.
Updated plunkr. It's not much difficult once you find out your mistake in previous question.