Question

Basically I have a small div that is initially styled to 60×60. I have created click event that animates the expansion of the div:

$("#myDiv").click(function () {
    $(this).animate(
    {
        width: "350px",
        height: "300px"
    }, 500);
}

I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?

I found the toggleClass function but I don’t think this will work with animiate.

You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/

Answer 1

$("#myDiv").toggle(function() {
    $(this).stop().animate({
        width: "350px",
        height: "300px"
    }, 500);
}, function() {
    $(this).stop().animate({
        width: "60px",
        height: "60px"
    }, 500);
});

Example.

The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.

More about toggle() here.