title: jQuery hide div, show div with new content
body: <p>I am trying to retract my div, then show it with new content based on which link they clicked.</p>
  
  <p>HTML:</p>
  
  <pre><code>          &lt;div id="menu"&gt;
      &lt;ul&gt;
                  &lt;a href="#" title="content_1" alt="about" class="menu"&gt;&lt;li&gt;about&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#" title="content_2" alt="contact" class="menu"&gt;&lt;li&gt;contact&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#" title="content_3" alt="cv" class="menu"&gt;&lt;li&gt;cv&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
         &lt;div class="content"&gt;
              test
          &lt;div id="content_1" class="content"&gt;
              content1
          &lt;/div&gt;
          &lt;div id="content_2" class="content"&gt;
              content2
          &lt;/div&gt;
          &lt;div id="content_3" class="content"&gt;
              content3
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("a.menu").click(function() {
                  var clicked = $(this).attr('title');
                  $(".content").hide('slide', {direction: 'right'}, 1000);
                  $("#"+clicked).show('slide', {direction: 'left'}, 1000);
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content {
  position: absolute;
  
  left:303px;
  top: 200px;
  width: 100%;
  
  margin-top: 200px;
  background: #6c7373;
  
   }
  
  #content_1, #content_2, #content_3 {
  display: none;
   }
  </code></pre>
  
  <p>What happens is: the div retracts, but does not reappear at all, what is going wrong here?</p>
  
  <p>Thanks.</p>