Question

This is a pretty straight-forward problem. I basically have a div block on a page that, when clicked, grows in size, and when clicked again returns back to what it was. My problem is that it just doesn’t seem to work at all. Plus, I’m sure there is a much cleaner way to toggle between two animation states than an if statement like this, but I’m not sure how exactly to go about doing that.

$(document).ready(function(){
    var toggle = 0;
    $(".login").click(function(){
        if($toggle == 0){
            $(this).animate({
                height: '200',
            }, 500, function(){
            });
            $toggle = 1;
        }
        else if($toggle == 1){
            $(this).animate({
                height: '100',
            }, 500, function(){
            });
            $toggle = 0;
        }
    });
});

Corresponding html code is simply

<div class="login">Click Me</div>

Let me know if anything else is needed.

Answer 1

Your code isn’t working because you have used toggle in one place and $toggle in another.

But, this can be done more simply like this:

$(document).ready(function(){
    $(".login").toggle(function() {
        $(this).animate({height: '200'});
    }, function() {
        $(this).animate({height: '100'});
    });​
});

Working demo here: http://jsfiddle.net/jfriend00/5Wu6m/

When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you – you don’t have to do that.

jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don’t always find the right one when searching the jQuery doc.