Search code examples
javascriptjqueryangularjsangular-directive

Why toggle effect not working for nested div using angular Directive

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');
    });
 });
Solution

  • 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">