Slide effect (jQuery)
<p>I wonder why this isn't working as expected:</p>

<pre><code>$(function() {

    $(".door1-trigger").click(function() {
      $(".door").hide();
      // $(".door1").show("slide", { direction: "right" }, 1000);
      return false;
    });
    $(".door2-trigger").click(function() {
      $(".door").hide();
      $(".door2").show("slide", { direction: "left" }, 1000);
      return false;
    });
    $(".main-trigger").click(function() {
      $(".door").hide();
      if ($('.door1:visible')) {
          $(".main").show("slide", { direction: "left" }, 1000);
      } else {
          $(".main").show("slide", { direction: "right" }, 1000);
      }
      return false;
    });

});
</code></pre>

<p><a href="http://jsfiddle.net/UePuR/36/" rel="nofollow">JSFiddle</a></p>

<p>I would like only the <code>main</code> shown initially, clicking on <code>door 1</code> slides the appropriate container from left, and clicking <code>door 2</code> slides the door2 container from right.</p>

<p>Many thanks for your help!</p>
