Question

Please, why is this not working:

$("#togglePanel").click(function(e){        
    $("#toolpanel").toggle(function(){
        $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
    }, function(){
        $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
    });
});

But when I do this, it works:

$("#togglePanel").click(function(e){        
    $("#toolpanel").toggle(function(){
        $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
    });
});

Thanks…

Answer 1

The toggle function “uses the click event internally”. That is to say, it binds functions to click events, so you don’t need to call click as well. Try this:

$("#togglePanel").toggle(function(){
    $("#orderMap").animate({marginLeft: 0, width: "100%"}, 500);
}, function(){
    $("#orderMap").animate({marginLeft: "341px", width: "576px"}, 500);
});