jQuery click event to make a div slide down and push next div out of viewport

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...

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...

I'm not all 开发者_StackOverflowthat great with jQuery so I'm sure I've gone about this the wrong way, but here's what I've tried:

$(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();
 }
});

});

You only need to bind click once, and you can toggle the slide effect. You could try something like this

$(document).ready(function() {

  $('#click').click(function() {
    $('#content1').slideToggle();
    $('#content2').slideToggle();
  }
}

Now you are trying to bind two click event handlers to the same element. This is not possible the way you try but with namespaced events it is: $(#click).bind('click.event1') and then later .bind('click.event2')

However you can to all in one function:

$(document).ready(function() {
    // Pre selected for increased speed
    var content1 = $('#content1');
    var content2 = $('#content2');

    $('#click').click(function() {
        content1.slideToggle();
        content2.slideToggle();
    });
});

It won't be in perfekt synchronization but will probably look OK.