使用JavaScript展开和折叠Div

Question

这是我的代码，它工作正常。但是，我不想将样式保留在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> 

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

Answer 1

我不得不使用中的getComputedStyle JavaScript来从外部文件

得到的CSS