A chunk of Javascript that allows you to replace a panel on a page with another one and slide the panel in from the right (or left if going backwards)

slideInPanel.js

        /**
         * Slide in a panel and slide out the old one.
         */
        function slideInPanel(cur_el, next_el, forward){
        	
        	// This is the speed of the animation. This should be a sane default.
        	var speed = 200;
        	
        	//Define the CSS for the difference between the height and position
        	var cur = {
        		height: cur_el.height()+'px'
        	}
        	
        	// Clear any left-over height value so that the real height can be determined
        	next_el.css('height', 'initial');
        	
        	var next = {
        		height: next_el.height() +'px',
        		left: '0px',
        		position: 'relative'
        	};
        	
        	// Go ahead and hide the current item and show the next one that we will be pulling into the screen
        	cur_el.hide();
        	next_el.show();
        	
        	// Setup the position of the next div before we start the animation
        	if(forward){
	        	next_el.css({
	        		left: cur_el.width()+'px',
	        		position: 'relative'
	        	});
        	}
        	else{
	        	next_el.css({
	        		left: (-1 * cur_el.width()) +'px',
	        		position: 'relative'
	        	});
        	}
        	
        	// Animate it
        	next_el.css(cur).animate(next, speed, function(){ next_el.css('height', 'initial'); });
        	
        }