$(document).ready(function(){
	//Expand Div
    $("#expandhover").click(ExpandDiv);
	//Contract Div
	$("#contracthover").click(ContractDiv);
}); 
		
//The functions that do the work
function ExpandDiv(){  
        $("#expander").animate({"height":200},400, "easeOutSine");
        $("#expandhover").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 0.0});
		$("#contracthover").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 1.0});
        }
 
function ContractDiv(){  
        $("#expander").animate({"height":0},400, "easeOutSine");
        $("#expandhover").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 1.0});
		$("#contracthover").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 0.0});
        }