Css动画展开、收起

用Css、Js实现动画展开和收起效果，主要使用Css中overflow属性使div初始隐藏，transition属性实现动画过渡效果，再通过js代码控制div的展开和收起状态。以下是代码截图。
Html代码如下：

one

two

three

four

five

six

seven

eight

nine

ten

展开

js代码如下 // JavaScript Document window.onload = function(){ var con = document.getElementById("con"); var btn = document.getElementById("btn"); var timer; var h = 85;

//绑定鼠标单击事件
btn.onclick = function(){
	//动画展开
	if(btn.innerHTML === "展开"){
		con.style.height = 400 + "px";
		btn.innerHTML = "收起";    
	}
	//动画收起
	else if(btn.innerHTML === "收起"){
		con.style.height = 85 + "px";
		btn.innerHTML = "展开"; 
	}
};

};