jquery - Hide and show parents and child menubar -
i trying making menubar. when clicks on parent li ( showul) want slidedown child li (hideul). , again when clicks on parent li, should open respective child li hide opened li. check jsfiddle better understanding. kindly help. learning jquery.
<ul> <li><a href="#" id="update" class="showul">update pages</a> <ul class="hideul"> <li>about us</li> <li>contact us</li> </ul> </li> <li><a href="#" id="category" class="showul">category option</a> <ul class="hideul"> <li>add category</li> <li>category list</li> </ul> </li> <li><a href="#" id="postoption" class="showul">post option</a> <ul class="hideul"> <li>add post</li> <li>post list</li> </ul> </li> </ul> $(document).ready( function() { $(".showul").click(function(){ $(".hideul").slidetoggle("slow"); }); });
firstly need use siblings()
find ul
related current a
. hide other ul
while toggling current one, can use this:
$(".showul").click(function() { var $hideul = $(this).siblings(".hideul"); var show = !$hideul.is(':visible'); $('.hideul').slideup('slow'); if (show) $hideul.slidetoggle('slow'); });
Comments
Post a Comment