展开收起动画是怎么实现的

点击展开收起按钮实行动画一般的滑动，我们来和大家说一下是怎么用css来完成，来看一下下面的截图

.con{
 height: 230px;
 width: 700px;
 background: #e5e5e5;
 margin: 0 auto;
 overflow: hidden;
 transition: height 1s ease; 
}

两个不同的div,给展开收起的按钮一个id和显示隐藏，然后在css中给内容区一个超出隐藏和一个动画transition，给动画一个高度，也可以设置你喜欢的属性，给它动画的时间和动画过渡函数，如果你不给内容区盒子一个超出隐藏的代码，那么它的内容就会显示出来，就会不美观，然后在js中给它一个点击事件，设置动画的盒子样式的要改变的高度就可以了。

window.onload=function(){
  var zhangkai=document.getElementById("zhangkai");
 var shouqi=document.getElementById("shouqi");
 var con=document.getElementById("con");
 zhangkai.onclick=function(){
  con.style.height="230px";
  shouqi.style.display="block";
  zhangkai.style.display="none";
 };
 shouqi.onclick=function(){
  con.style.height="80px";
  shouqi.style.display="none";
  zhangkai.style.display="block";
 }; 
};