Basically I have a small div that is initially styled to 60x60. 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: /

Basically I have a small div that is initially styled to 60x60. 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/NS9Qp/

• javascript
• jquery

5 Answers 5

$("#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.

just to be different :

var size=[];
$("#cornerBox").click(function(){
    $(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
    $(this).stop().animate({ width: size[0], height: size[1] },500);
});

Fiddle: http://jsfiddle/NS9Qp/1/

I ended up using jQuery UI's animated toggleClass effect: http://jqueryui./demos/toggleClass/

super simple code:

$('h2').click(function() {
    $(this).next().toggleClass("hidden", 1000);
});

Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).

<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>

<script type="text/javascript">
    var div = $('#myDiv');
    div
        .attr('defWidth', div.width())
        .attr('defHeight', div.height())
        .toggle(function() {
                $(this).stop().animate({width: "350px", height: "300px"}, 500);
            }, function() {
                $(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
            }
        );
</script>

What I do for cases like this, is store a transformation array.

var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};

Then, store a toggle between 0 or 1, and use the corresponding values for the animation.

EDIT: bine this with the previous example of toggle, and you've got yourself a solid working solution!