title: jQuery click event to make a div slide down and push next div out of viewport
body: <p>I'm trying to figure out how to make jQuery slide #content2 down and replace #content1 with it while making it look like #content1 is actually being pushed down by #content2 removing it from view...</p>
  
  <p>Then the same button that was clicked to make #content2 replace #content1 would also need to do the reverse effect by replacing #content2 with #content1 making them slide up and push each other out of the way...</p>
  
  <p>I'm not all that great with jQuery so I'm sure I've gone about this the wrong way, but here's what I've tried:</p>
  
  <pre><code>$(document).ready(function() {
  $('#click').click(function() {
   if($('#content1').is(':visible')) {
    $('#content1').slideUp();
   }
   else {
    $('#content2').slideDown();
   }
  }).click(function() {
   if($('#content1').is(':visible')) {
    $('#content2').slideDown();
   }
   else {
    $('#content1').slideUp();
   }
  });
  </code></pre>
  
  <p>});</p>