Question

I’m trying to have a element toggle it’s own size using jquery… However it behaves rather strangely, when I click it the first time it expands (brilliant) However when I click it again I wan’t it to go back to it’s original size, however it goes back to it’s original size and then expands again… on the third click it does the same… 4th it contracts, expands, contracts, then expands again… and so on!

Is there any way of avoiding this, i’m guessing it is because it interprets a click on the large box as a click on the large and a click on the small?

Here’s my code 🙂

$(document).ready(function(    
$("#box").click(function(){
 $("#box").toggle(function(){
        $("#box").animate({width:960},"fast","swing");
        $("#box").animate({height:500},"fast","swing");},
    function(){
        $("#box").animate({height:20},"fast","swing");
        $("#box").animate({width:20},"fast","swing");
    });
});

});

Answer 1

toggle is a click handler. You don’t need to wrap it in click: it’s done for you. In fact, you’re rebinding the toggle code every time the element is clicked, hence the increasing numbers.

$(document).ready(function (
$("#box").toggle(function () {
    $(this).animate({width: 960}, "fast", "swing");
    $(this).animate({height: 500}, "fast", "swing");
}, function () {
    $(this).animate({height: 20}, "fast", "swing");
    $(this).animate({width: 20}, "fast", "swing");
});
});

Note that I have changed the repeated #box calls to this, which is far faster. I could also have changed the two sets of two lines into two single animatecalls (.animate({width: 960, height: 500})) but the difference in behaviour might be desired…