Question

I have this code that works half way through

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height:'+=50px'}, 500);
   jQuery('#extra').toggle(this.checked);
});

Right now, the cssbox gets enlarged when the checkbox is checked but when unchecked the cssbox keeps on getting bigger. How can I fix it so that when unchecked, it gets back to the original size?

Answer 1

Try something like below,

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height: ((this.checked)?'+=50px':'-=50px')}, 500);
   jQuery('#extra').toggle(this.checked);
});