使用JavaScript展开和折叠Div

Question

This is my code and it works fine. But, I don't want to keep the style in div tag so I created a class "sections" in style.css and placed it in the class tag. But, now the expand and collapse doesn't work. Any help would be appreciated.

<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>

<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%";    

        });

    }
}

After adding class "sections".

<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>

Answer 1

我必须在javascript中使用getComputedStyle才能从外部文件获取CSS