Toggling height of div in jQuery

Question

This question has been already addressed, but none of the solutions have worked for me.

I referred to this earlier question addressing the same problem:

I noticed that one of the responses gave this jsfiddle link, which implements the exact functionality that I want, and works.

    $("#topbar").toggle(function(){
      $(this).animate({height:40},200);
    },function(){
      $(this).animate({height:10},200);
    });

But when I changed the framework to anything but jQuery 1.4.4, the div starts instantly disappearing as soon as the page loads. This is the problem I've been having on my own project.

Any ideas on how to get that jsfiddle working on jquery 2.x? What am I missing?

Using toggle() like that was deprecated in jQuery 1.8 and removed in jQuery 1.9. See here: http://api.jquery.com/toggle-event/. If you use jQuery 1.8 or below, that code works fine. — meub, Aug 28 '13 at 00:09
@DevlshOne `.toggle()` still exists but is has been redefined with a different signature. @meub posted the relevant link. — Marc Audet, Aug 28 '13 at 00:22
bali's solution worked for me - it seems like it doesn't work with a value in px.. — amagumori, Aug 28 '13 at 06:30
`.height()` returns a unit-less pixel value, which coerces the rest of the values to pixel value, so the 'px` unit is not required in bali's solution (similar to others). In the original example, the `.height()` function was not used so the units needed to be specified to make things work. — Marc Audet, Aug 28 '13 at 12:45

score 3 · Accepted Answer · edited Aug 24 '16 at 19:06

The fix is simple:

$("#topbar").toggle(function () {
    $(this).animate({
        height: "40px"
    }, 200);
}, function () {
    $(this).animate({
        height: "10px"
    }, 200);
});

You just need to add px units to the height value.

See demo at: http://jsfiddle.net/audetwebdesign/3dd3s/

PS

Some of the other posted answers show a better way of coding this type of animation. I simply demonstrated how to fix the bug.

Note that this use of .toggle has been deprecated since jQuery 1.8.
Reference: http://api.jquery.com/toggle-event/

Why The Unit is Needed

Some of the other solutions involve the jQuery .height() function, which returns a unit-less pixel value. In this case, the computed value is coerced/cast to be a pixel value, so the 'px` unit is not required.

In the original example, the .height() function was not used so the units needed to be specified to make things work.

score 3 · Answer 2 · edited Jul 21 '14 at 21:49

3

jQuery

$("#topbar").click(function () {
    $(this).animate({
        height: ($(this).height() == 40) ? 10 : 40
    }, 200);
});

CSS

#topbar {
    background: orange;
    color: white;
    display:block;
    width:100%;
    text-align:center;
    height:40px;
}

HTML

<div id='topbar'>toggle me</div>

jsFiddle

edited Jul 21 '14 at 21:49

animuson

53,861
28
137
147

answered Aug 28 '13 at 00:25

DevlshOne

8,357
1
29
37

score 1 · Answer 3 · answered Aug 28 '13 at 00:16

Is this what you're going for?

http://jsfiddle.net/mmDCk/

$("#topbar").click(function() {
    $(this).animate({
        height: ($(this).height() == 10) ? 40 : 10
    }, 200);
});

That will toggle the height to either 40 or 10 depending on what it is at the moment.

Toggling height of div in jQuery

3 Answers3

Why The Unit is Needed

Linked