I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work, or is there a better way to do it?
body html:
<div id="topbar-show"></div>
css:
#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }
javascript:
$(document).ready(function(){
$("#topbar-show").click(function(){
$(this).animate({height:40},200).attr('id', 'topbar-hide');
});
$("#topbar-hide").click(function(){
$(this).animate({height:10},200).attr('id', 'topbar-show');
});
});
Give this a try:
$(document).ready(function(){
$("#topbar-show").toggle(function(){
$(this).animate({height:40},200);
},function(){
$(this).animate({height:10},200);
});
});
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);
}
})());
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');
}
});
});