title: SlideDown/ SlideUp Toggle 2 divs
body: <p>I have 2 divs, one visible, one not. I want to toggle the visibility by clicking a link but when I toggle the second time, my first div doesnt appears.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="search-extra"&gt;
    &lt;a href="#" id="toggle-to-advanced"&gt;Toggle to red&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="search-advanced"&gt;
    &lt;a href="#" id="toggle-to-normal"&gt;Toggle to black&lt;/a&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.search-advanced{display:none;}
  </code></pre>
  
  <p>jQuery:  </p>
  
  <pre><code>jQuery('#toggle-to-normal').click(function(e){
      e.preventDefault();
      jQuery('.search-advanced').slideUp('normal').queue( function(){
          jQuery('.search-extra').slideDown('normal');
      });
  });
  
  jQuery('#toggle-to-advanced').click(function(e){
      e.preventDefault();
      jQuery('.search-extra').slideUp('normal').queue( function(){
          jQuery('.search-advanced').slideDown('normal');
      });
  });​
  </code></pre>
  
  <p>Demo:</p>
  
  <p><a href="http://jsfiddle.net/rekQ9/" rel="nofollow">http://jsfiddle.net/rekQ9/</a></p>