原生JS手风琴效果

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .panel{
            width: 555px;
            height: auto;
            background-color: #333333;
            margin: 50px auto;
        }
        .panel-title{
            width: 100%;
            height: 60px;
            font:600 18px/68px '微软雅黑';
            color: #fff;
            cursor: pointer;
            text-align: center;
        }
        .collapase{
            width: 100%;
            height: 0;
            background: #167;
            overflow: hidden;
            border-top:1px solid #333;
        }
        .collapase p{
            color: #fff;
            padding: 20px;
        }

        .anmate{
            animation: show 1s linear  both;  
        }
        .anmate2{
            animation: show2 1s linear  both;  
        }


        @keyframes show{
            0%{height: 0;}
            100%{height: 210px;}
        }
        @keyframes show2{
            0%{height: 210px;}
            100%{height: 0px;}
        }
    </style>

 <div class="panel" id="panel">
        <h4 class="panel-title" >1《下雨》</h4>
        <div class="collapase" id="One">
            <p></p>
        </div>

        <h4 class="panel-title" >2《晴天》</h4>
        <div class="collapase" id="Two">
            <p></p>
        </div>

        <h4 class="panel-title" >3《忽然》</h4>
        <div class="collapase" id="Three">
            <p></p>
        </div>

    </div>

<script>
    
    
    var panel = document.getElementById("panel")
    var oH = document.getElementsByTagName("h4")
    var oDiv = panel.getElementsByTagName("div")

    var str = ["还是搞不懂，忙忙碌碌为了什么,什么都别说，重复是你最好的选择,不能忘记，不能忘乎所以，不能继续就这样沉下去","故事的小黄花，从出生到现在都都飘着……","忽然就出下泪来，忽然想要听到他的声音，而我却什么话都说不出来"]

    for(var i=0;i<oH.length;i++){
        oH[i].index = i;
        oH[i].onclick=function(){
            for(var j=0;j<oDiv.length;j++){
                // oDiv[j].style.height = 0;
               animate(oDiv[j],{height:0})
            }
            // oDiv[this.index].style.height = 210+"px";
            if(parseInt(getStyle(oDiv[this.index],'height')) == 0){
                animate(oDiv[this.index],{height:210});
                //将文本添加到页面
                oDiv[this.index].children[0].innerHTML =str[this.index]
            }else{
                animate(oDiv[this.index],{height:0});
            }
        }
    }

    //动画函数
    function animate(obj,json){
        // {height:210}
        //关闭上一个定时器
        clearInterval(obj.timer)

        obj.timer = setInterval(function(){
            //规定动画是否开启
            var flag =true;
            //每次走的距离  距离 = 目标位置 - 当前位置
            for(var arrt in json){
                var step =(json[arrt] - parseInt(getStyle(obj,arrt)))/10;
                // 距离取证
                step = step>0 ? Math.ceil(step) : Math.floor(step)
                //让盒子动起来
                obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step +"px";
                //

                if(parseInt(getStyle(obj,arrt)) !=json[arrt]){
                    flag = false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
            }

        },20)
    }
    //获取当前元素某一样式
    function getStyle(obj,arrt){
        //ie垃圾兼容
        return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt]
    } 

    
    </script>