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

Question

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

});

Answer 1

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

Answer 2

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.