Menu icon Foundation
Foundation 5 accordion and AngularJS

I just decided to do a little side project to learn some new technologies, so I'm trying out Foundation 5 and AngularJS (I've used Bootstrap in the past but I feel Foundation looks better). One issue I've ran into though is that the accordion in Foundation 5 seems to only be triggered by anchors, and in AngularJS 1.2 they interpret anchors as navigation away from the page. Is there any other way to trigger the accordion besides using anchors (eg. calling a Javascript function on the element)? Thanks!

Edit: Oh, I guess the "Angular" way of doing this is to conditionally apply the "active" class to the active section, which is all that Foundation seems to do normally, so I guess that's one way of solving it. And I guess that means this was really an AngularJS question, not so much a Foundation 5 question, but hopefully it helps some other people.

accordionsangular.js

I just decided to do a little side project to learn some new technologies, so I'm trying out Foundation 5 and AngularJS (I've used Bootstrap in the past but I feel Foundation looks better). One issue I've ran into though is that the accordion in Foundation 5 seems to only be triggered by anchors, and in AngularJS 1.2 they interpret anchors as navigation away from the page. Is there any other way to trigger the accordion besides using anchors (eg. calling a Javascript function on the element)? Thanks!

Edit: Oh, I guess the "Angular" way of doing this is to conditionally apply the "active" class to the active section, which is all that Foundation seems to do normally, so I guess that's one way of solving it. And I guess that means this was really an AngularJS question, not so much a Foundation 5 question, but hopefully it helps some other people.

Muhammad Reda over 4 years ago

The same issue is discussed on SO. Check these answers
http://stackoverflow.com/a/20628553/863380
http://stackoverflow.com/a/20628645/863380

Both worked for me.