JQuery.animate () sets the display: no, how to avoid this?

Question

I have the following code:

HTML:

<div id="clickme"> Click me :-) </div> <div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;"> Stay, damn! </div> 

JavaScript:

 $('#clickme').click(function() { $('#info').animate({ marginBottom: 'toggle' },{ duration:500 }); }); 

It is also available at http://jsfiddle.net/DxnQJ/

Obviously, I want the #info DIV show / disappear whenever the #clickme DIV . It works as intended, except that the #info DIV disappears after the animation due to jQuery setting its CSS display property to none .

How can I tell jQuery to stop hiding my DIV ?

Answer 1

I would recommend using .slideToggle :

 $('#clickme').click(function() { $('#info').slideToggle(500); }); 

Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

Answer 2

javascript code

  $('#clickme').toggle( function () { $('#info').animate({ height:"0px" }, 500); }, function () { $('#info').animate({ height:"100px" }, 500); }); 

http://jsfiddle.net/amkrtchyan/zymUK/2/

Answer 3

Replacing the click function with this function:

 $('#clickme').click(function() { var whichSetting = $('#info').css('marginBottom'); if(whichSetting == '-100px') { whichSetting = '0px'; } else { whichSetting = '-100px'; } $('#info').animate({ marginBottom: whichSetting },{ duration:500 }); });