Question

I have multiple buttons on one page. WHen you click a button, a panel slides out and reveals content. I set up a working demo here: http://jsfiddle.net/5ZgMR/1/

As you can see, it works fairly well. When a button is clicked, a panel shows, and then when it is clicked again, the panel slides down. The problem lies when you open one panel and then a second. It is buggy in that the active class stays and the panel doesn’t react on the next click. It is best if you just try the demo and see for yourself. Click a few times, as the bug doesnt happen on the first click.

I think the problem lies within the callback function in the toggle, as shown below. Anyone have any ideas how to fix this issue?

$("a.button").toggle(function(){
         idClick = $(this).attr("id");
         newSelector = $("#pane"+idClick);
         varthis = $(this);

         newSelector.animate({ 'bottom' : 99});
         $(".pane").not(newSelector).animate({ 'bottom' : -275});
         $(this).addClass("activeBtn");
         $("a.button").not(varthis).removeClass("activeBtn");

    }, function(){
        newSelector.animate({ 'bottom' : -275});
        $(this).removeClass("activeBtn");
    });​

Answer 1

I think the toggle is going to mess you up because a given pane could’ve been hidden either from clicking on the corresponding button OR by clicking a different button. Try something more like this….

$("a.button").click(function(e){
     idClick = $(this).attr("id");
     var newSelector = $("#pane"+idClick);
     varthis = $(this);

     if ($(this).hasClass("activeBtn")){
         $(this).removeClass("activeBtn");
         newSelector.animate({ 'bottom' : -275});
     }
     else{
         newSelector.animate({ 'bottom' : 99});
         $(".pane").not(newSelector).animate({ 'bottom' : -275});
         $("a.button").removeClass("activeBtn");
         $(this).addClass("activeBtn");
     }
});