jquery - Replace "toggle" with "animate" -

this jquery snippet shows or hides submenu item when menu link clicked:

jquery(document).ready(function($) {  $('.main-navigation ul li a').click(function() {    var li = $(this).closest('li');    if(li.has('ul'))         li.find('ul').toggle(100); });  }); 

how can similar effect achieved "animate" rather "toggle"?

thank in advance suggestions!

you can use several predefined toggles like

.slidetoggle() , .fadetoggle()

or can use way toggle animations

$('.main-navigation ul li a').toggle( function() {   $('#something').animate({     height: "100"   }, 500); }, function() {   $('#something').animate({     height: "200"   }, 500); }); 

---

since .toggle() 2 handlers deprecated

here way should it

var toggle = false;  $('#foo').click(function() {   if (toggle) {     $("#bar").hide();   } else {     $("#bar").show();   }   toggle = !toggle; }); 

here have working example in jsfiddle http://jsfiddle.net/bwkc9/1/