Collapsible Navigation

Collapsible Navigation

I have this HTML




  1. <li class="parent"><a href="#"><i class="fa fa-cog"></i> <span>Message Streams</span></a>
  2.             <ul class="children">
  3.                
  4.                
  5.                     <li class="parent1"><a href="#"><i class="fa fa-cog"></i> <span>sean&nbsp;k</span></a>
  6.                         <ul class="children1">                                   
  7.                                     <li class="parent2"><a href="#"><i class="fa fa-cog"></i> <span>TEST 2&nbsp;TEST 3</span></a>
  8.                                         <ul>
  9.                
  10.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/3'><i class="fa fa-cog"></i> Message Stream - TEST after IPN</a></li>
  11.                               
  12.                                           </ul>
  13.                                     </li>
  14.                                    
  15.                                     <li class="parent2"><a href="#"><i class="fa fa-cog"></i> <span>sk&nbsp;k</span></a>
  16.                                         <ul>
  17.                
  18.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/1'><i class="fa fa-cog"></i> Message Stream - TEST after IPN</a></li>
  19.                
  20.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/2'><i class="fa fa-cog"></i> Message Stream - TEST after IPN</a></li>
  21.                
  22.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/5'><i class="fa fa-cog"></i> Message Stream - TEST WITH MONEY</a></li>
  23.                
  24.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/9'><i class="fa fa-cog"></i> Message Stream - EXAMPLE3</a></li>
  25.                
  26.                                                 <li class="children2"><a href='https://pencopyediting.com/admin/message_streams/10'><i class="fa fa-cog"></i> Message Stream - EXAMPLE 6</a></li>
  27.                               
  28.                                           </ul>
  29.                                     </li>
  30.                
  31.                                    
  32.                         </ul>.
  33.                     </li>
  34.             </ul>
  35.         </li>








This is the jquery for showing and collapsing but when you click on parent1 nothing happens.I put in an alert to see but it isn't being called and I can't see why



  1. jQuery('.leftpanel .nav .parent .parent1 > a').click(function() {
  2.       var coll = jQuery(this).parents('.collapsed').length;
  3.       if (!coll) {
  4.          jQuery('.leftpanel .nav .parent-focus').each(function() {
  5.             jQuery(this).find('.children').slideUp('fast');
  6.             jQuery(this).removeClass('parent-focus');
  7.          });
  8.          var child = jQuery(this).parent().find('.children');
  9.          if(!child.is(':visible')) {
  10.             child.slideDown('fast');
  11.             if(!child.parent().hasClass('active'))
  12.                child.parent().addClass('parent-focus');
  13.          } else {
  14.             child.slideUp('fast');
  15.             child.parent().removeClass('parent-focus');
  16.          }
  17.       }
  18.       return false;
  19.    });



Similar code works for parent


Thanks