Toggle DIV height upon `onClick`

css, html, jquery

Solution

Why don't you use `.animate()` directly to set the height of a div and animate the change each time the div is clicked!

like:

$( "div" ).click(function() {
    if ( $(this).height() != 50)
          $( this ).animate({ height: 50 }, 1000 );
    else
          $( this ).animate({ height: 100 }, 1000 );
});

here's a complete example of it : http://jsfiddle.net/62jcH/3/

Problem

I want to toggle the height of a division. I've tried using .animate with a if/else statement. but it would just bounce back. The code im now using will hide my division instead of toggling the height. It will trigger when clicked. ``` $(document).ready(function() { $("#content1").toggle(function(){ $(this).animate({height:'400px'}); }, function() { $(this).animate({height:'200px'}); }); }); ``` I hope someone has the answer because I could nowhere find a answer on google/stackoverflow.

Original source

Related problems