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.

• javascript
• angularjs

1 Answer 1

Your $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.