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