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