Hi, I m creating a dropdown menu with jquery which is working fine on two clicks however if you click on the link the third time if slides up and down itself. Can you tell me what mistake I m making and how to fix this. I dont want to add any more classes or ids in the markup. I m new to jquery so an explanation would be very helpfull. here is the code.. <!DOCTYPE> <html > <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <style> .sidebar li{ list-style:none; background-color: #ccc; width:100px; } .sidebar li ul li{ background:#fff; display:block; } .sidebar li ul{ background:#fff; margin-left:-40px; } .sidebar li ul li a{ color:#000; display:block; } .sidebar a{ text-decoration:none; color:#fff; } .active{ color:#c39; font-weight:bold; } </style> <body> <div > <ul class="sidebar"> <li ><a href="#">Home</a> <ul id="areaa" > <li><a href="#">Item 1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </li> <li><a href="#">About Us</a> <ul id="areab"> <li><a href="#">Item 4</a></li> <li><a href="#">Item5</a></li> <li><a href="#">Item6</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Menu</a></li> </ul> </div> <script> $(document).ready(function(e) { $('.sidebar li ul').hide(); }); $('.sidebar li').click(function(){ $(this).addClass('active'); $('.active ul').slideDown(700); $('.active').click(function(){ $('.active ul').slideUp(700); $('.active').removeClass('active'); }); }); </script> </body> </html> HTML: