Hide one <li> when clicking another <li>

Question

I'm using toggle to show <li> and hide other <li> .

 $('.hassub').click(function() { $(this).find('ul.hassub1').toggle(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="mainLi active open"><a href="#" class="pageNav"><i class="fa fa-dashboard"></i>Demo Grp</a> <ul style="height:auto;"> <li class="mainLi hassub"><a href="#" class="pageNav"><i class="fa fa-cogs"></i>Demo SUb Grp2</a> <ul class="hassub1" style="margin-top: 1%; display: none;"> <li><a href=""><i class="fa fa-link fa-cogs"></i>AE_TAT</a></li> <li><a href=""><i class="fa fa-link fa-cogs"></i>Agent_Analysis</a></li> </ul> </li> <li class="mainLi hassub"><a href="#" class="pageNav"><i class="fa fa-cogs"></i>Demo Sub Grp</a> <ul class="hassub1" style="margin-top: 1%; display: block;"> <li><a href=""><i class="fa fa-link fa-cogs"></i>AE_CCL_TAT</a></li> <li><a href=""><i class="fa fa-link fa-cogs"></i>Customer_Profile_Analysis</a></li> </ul> </li> </ul> </li>

need to close li if second time clicks on different li

Answer 1

Try with this code on your click function :

$(this).siblings().find('.hassub1').hide(); 
$(this).find('ul.hassub1').toggle();