title: jQuery toggling div visibility
body: <p>I have a HTML document with the below setup:</p>
  
  <pre><code>&lt;div class="main-div" style="padding: 5px; border: 1px solid green;"&gt;
  
      &lt;div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple"&gt;
        First Div
        &lt;a href="#" class="control"&gt;Control&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;"&gt;
        Second Div
        &lt;a href="#" class="control"&gt;Control&lt;/a&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I also have a CSS class setup called <code>hidden</code> with display setup to none.</p>
  
  <p>I have jQuery setup like so:</p>
  
  <pre><code>$('.control').click(function(){
  
      var master = $(this).parent().parent();
      var first_div = $(master).find(".first-div");
      var second_div = $(master).find(".second-div");
  
      $(first_div).toggleClass("hidden")
      $(second_div).toggleClass("hidden")
  
    });
  </code></pre>
  
  <p>This setup toggles the visibility of the divs, click the control button it hides one div and show the other.</p>
  
  <p>However this just hides and shows each div in a flash.  I am looking to add some animation to the transitioning of the divs, maybe have one slide up and the other slide down when the 'control' is clicked and vice versa but I am unable to achieve this.</p>
  
  <p>Could anyone help out and give some advice on how to do this?</p>
  
  <p>Cheer</p>
  
  <p>Eef</p>