使用Javascript展开和折叠Div

这是我的代码，它工作得很好。但是，我不想在div标记中保留样式，所以我在style.css中创建了一个类“sections”，并将其放置在class标记中。但是，现在扩张和崩溃都不起作用了。任何帮助都将不胜感激

<div class="col-sm-10" >
            <div id="profile_section" class="center-block sections"style="border:2px solid black; 
            height:40px;
            width:60%;">
                <h4>Profile<h4>
                <button id="1" onclick="func1(this)" class="icon_button glyphicon glyphicon-chevron-down">
            </div>
            <br>

轮廓

功能1（项目）{
项目=项目最近（“div”）；
如果（item.style.height==“300px”）{
控制台日志（“高度=300px”）；
item.className=‘中心块平滑_合同’；
item.addEventListener（“animationend”，函数（）{
item.className=“中心块”；
item.style.height=“40px”；
item.style.width=“60%”；
//scrollTo（文档.正文，项目.抵销，100）；
});
}
else if（item.style.height==“40px”）{
item.className='中心块平滑扩展'；
item.addEventListener（“animationend”，函数（）{
item.className=“中心块”；
item.style.height=“300px”；
item.style.width=“100%”；
});
}
}

在添加类“节”之后

轮廓

我不得不在javascript中使用getComputedStyle从外部文件获取css

<script>

function func1(item){
    item = item.closest("div");
    if(item.style.height=="300px"){
        console.log("height=300px");
        item.className = 'center-block smooth_contract';
        item.addEventListener("animationend", function(){
            item.className = "center-block";
            item.style.height="40px";
            item.style.width="60%";
            //scrollTo(document.body,item.offsetTop,100);
        });
    }
    else if(item.style.height=="40px"){
        item.className = 'center-block smooth_expand';
        item.addEventListener("animationend", function(){
            item.className = "center-block";
            item.style.height="300px";
            item.style.width="100%";    

        });

    }
}

<div class="col-sm-10" >
            <div id="profile_section" class="center-block sections">
                <h4>Profile<h4>
                <button id="1" onclick="func1(this)" class="icon_button glyphicon glyphicon-chevron-down">
            </div>
            <br>
</div>