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

update fiddle


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -