toggle effect in jquery not working

Question

Hi All

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);
});

Answer 2

If the #togglePanel is showing and hiding the #toolPanel, I would separate their two events rather than nest them. So, do something like this...

$("#togglePanel").toggle(function(e){        
    $("#toolPanel").show();
}, function() {
    $("#toolPanel").hide();
});

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

You don't need to have them nested to achieve the effect you want.

Additionally, the one problem that may arise with my solution is that the #toolPanel's "toggle" state is saved even between hiding and showing it. So, you may want to reset its toggle status when you hide it (do that in the #togglePanel.toggle()).

Answer 3

Guys

I have found a solution to my problem by mixing up all your answers and come up with this:

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

It works as I expected. All I had to do was to add the hide and show methods to the 'toolpanel' div.

But thanks for your help though. It was your answers that gave me the headstart to my solution.