JavaScript - dockable panel in jquery

hi..I 'm new to jquery and i'm making a dockable panel using jquery....the code z

$(

"#links").toggle(function () {

// alert("toggle");

$("#test").show()

$("#test").animate({ left: "2px" }, 200);

// $("#dock li ul").show();

// $(this).find("ul").animate({ left: "2px" }, 200);

},

function () {

// $("#dock li ul").hide();

// });

$("#test").animate({ left: "-180px" }, 200);

});

the problem is that i just want to hide the aniamtion on link click("#links"). only...but the animatin diasppears even if I click on region outside it....how to prevent it..

any help is appreciated..

The code below then recalculates heights for each docked panel and hides "dock" link and shows "undock" link. It will also check for number of docked items in order to move content to the right if at least one panel is docked.

$(document).ready(function(){
    var docked = 0;
    
    $("#dock li ul").height($(window).height());
        
    $("#dock .dock").click(function(){
      $(this).parent().parent().addClass("docked").removeClass("free");
      
      docked += 1;
      var dockH = ($(window).height()) / docked
      var dockT = 0;         
      
      $("#dock li ul.docked").each(function(){
        $(this).height(dockH).css("top", dockT + "px");
        dockT += dockH;
      });
      $(this).parent().find(".undock").show();
      $(this).hide();
      
      if (docked > 0)
        $("#content").css("margin-left","250px");
      else
        $("#content").css("margin-left", "60px");
    });
});

Undocking functionality is very similar. It actually do an opposite actions in comparing to docking functionality :)

   $("#dock .undock").click(function(){
      $(this).parent().parent().addClass("free").removeClass("docked")
        .animate({left:"-180px"}, 200).height($(window).height()).css("top", "0px");
      
      docked = docked - 1;
      var dockH = ($(window).height()) / docked
      var dockT = 0;        
     
      $("#dock li ul.docked").each(function(){
        $(this).height(dockH).css("top", dockT + "px");
        dockT += dockH;
      });
      $(this).parent().find(".dock").show();
      $(this).hide();
     
      if (docked > 0)
        $("#content").css("margin-left", "250px");
      else
        $("#content").css("margin-left", "60px");
    }); 

It can be optimized and polished or even used to create a plugin, but that will have to wait for a while. I hope you will make some use of this.