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's also available at /

Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working 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?

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's also available at http://jsfiddle/DxnQJ/

Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working 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?

• javascript
• jquery
• html
• css
• jquery-animate

• 2 Checking out jQuery source, it looks like 'toggle' was designed for effects that are either entirely shown or hidden (like height, width, and opacity). What happens is that clicking 'Click me :-)' and animating something not hidden for the first time has the same effect as if you had marginBottom: 'hide'. So when it is done animating, jQuery( elem ).hide(); is called on your element. – zkhr Commented Dec 23, 2011 at 2:12

3 Answers 3

I would remend using .slideToggle:

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

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

javascript code

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

http://jsfiddle/amkrtchyan/zymUK/2/

Replacing your click function with this works:

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

    });