I have attached the Plunker. I am unable to access .gc and .mc element . Although my code is working partially and class .bc is working as expected. I am trying to apply toggle effect on them and hierarchy wise
BroadCategory > GeneralCategory > MainCategory
Not sure what am I missing in
$(element).find('.gc').click( function() {
alert('GC');
$(element).find(".mc").slideToggle('200',function() {
$(element).find("span").toggleClass('faqPlus faqMinus');
});
});
When Angular links the BroadCategory div, the GeneralCategory (ng-repeat)elements have not yet been created yet. So the click handler is never added. Add the d-expand-collapse attribute to the .gc element. You should then see your click alert fire.
<div d-expand-collapse ng-repeat="gen in group.items">
Your function is being called before the ng-repeat that creates the .gc elements. A quick fix would be to wrap the function in a timeout to let it finish rendering. I'm sure there is a better way using some hook in angular, but this will accomplish what you want.
setTimeout(function () {
$(element).find('.gc').click( function() {
alert('GC');
$(element).find(".mc").slideToggle('200',function() {
$(element).find("span").toggleClass('faqPlus faqMinus');
});
});
});
