Toggling height of div in jQuery

jquery toggle left to right animation
jquery animate toggle
jquery animate height','auto
jquery animate height:100
onclick change div height jquery
slidetoggle is not a function
jquery animate slide left
jquery toggleclass animate

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?

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.

jQuery animate() - using pre-defined values, jQuery toggle height between two values. Hello, Can you please tell me a code to toggle height for a div on click. I want to toggle between  So on button click, check height. If the height is 200 then div needs to be 300, and opposite.

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

jQuery toggle height between two values., A function to call once the animation is complete, called once per matched element. The .slideToggle() method animates the height of the matched elements​. The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.

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.

.slideToggle(), toggle() becomes an animation method. The . toggle() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use.css ("height") rather than.height ().

.toggle(), When .stop() is called on an element, the currently-running animation (if any) is the element will now still be displayed, but will be a fraction of its previous height. In previous versions, calling the .stop() method before a toggled animation  The.toggle () method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

.stop(), Or, if you want to animate font size, you would use fontSize or the CSS equivalent 'font-size' rather Note that the target value of the height property is 'toggle' . Toggling height of div in jQuery; Toggling the bottom property of parent div; Toggling visibility of a div in dojo; Toggling display of a div with jQuery; DIV with 100% of Parent's Viewport; Div height scale to viewport; jQuery trigger when 2/3s of div are in viewport; Toggling div position:fixed sometimes causes scrolling bug

.animate(), toggle() methods, the to argument is used as the starting point and the original size used as the endpoint. Example: Resize the element using the size effect. 1. 2​. jQuery Animate a div to the right. Here I will add left CSS property on a div element using jQuery Animate method.. This will create an animation effect when the div will move to the left side.

Comments
  • Using toggle() like that was deprecated in jQuery 1.8 and removed in jQuery 1.9. See here: api.jquery.com/toggle-event. If you use jQuery 1.8 or below, that code works fine.
  • jsfiddle.net/CB2vZ
  • @DevlshOne .toggle() still exists but is has been redefined with a different signature. @meub posted the relevant link.
  • bali's solution worked for me - it seems like it doesn't work with a value in px..
  • .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.