Jquery - animate height toggle
Give this a try:
$(document).ready(function(){ $("#topbar-show").toggle(function(){ $(this).animate({height:40},200); },function(){ $(this).animate({height:10},200); });});
You should be using a class to achieve what you want:
css:
#topbar { width: 100%; height: 40px; background-color: #000; }#topbar.hide { height: 10px; }javascript:
$(document).ready(function(){ $("#topbar").click(function(){ if($(this).hasClass('hide')) { $(this).animate({height:40},200).removeClass('hide'); } else { $(this).animate({height:10},200).addClass('hide'); } }); });
You can use the toggle-event(docs) method to assign 2 (or more) handlers that toggle with each click.
Example: http://jsfiddle.net/SQHQ2/1/
$("#topbar").toggle(function(){ $(this).animate({height:40},200);},function(){ $(this).animate({height:10},200);});or you could create your own toggle behavior:
Example: http://jsfiddle.net/SQHQ2/
$("#topbar").click((function() { var i = 0; return function(){ $(this).animate({height:(++i % 2) ? 40 : 10},200); }})());