text: Q:
  
  Change 'origin' of .toggle() animation in JQuery
  
  When using .toggle() to animate an element, I have found that the element always originates from and dissapears to the left side of the page, regardless of it's margins and alignment set by CSS. I have buttons on the left ad right of a web page that each open a small panel. The buttons on the left look fine when .toggle is called on their panels, because the animation originates from that side of the page. However, for the right buttons, the panels animate from the left, crossing the entire page to the right. They end up in the right place, but is it possible to have them originate from different points?
  UPDATE: A dumbed-down example, here: http://jsfiddle.net/tMaJe/
  
  A:
  
  You cannot change the effect of the animation for .toggle, .show or .hide in jQuery. 
  You can either use .animate or load jQuery UI that will enable you to specify the effect for the above mentioned methods.
  Example:
  var $foo = $("#foo");
  
  // with jQuery UI
  $("button:first").click(function(){
      $foo.toggle("blind");
  });
  
  // without jQuery UI
  $("button:last").click(function(){
      if ($foo.is(":visible")) {
          $foo.data("height", $foo.height()).animate({
              height: 0
          }, function(){ $(this).hide(); });
      } else {
          $foo.show().animate({
              height: $foo.data("height")
          });
      }
  });
  
  You can see this in action on jsFiddle.
  
  