手风琴关闭动画不起作用。 它打开（带有动画）然后关闭（没有动画）

Question

I'm pretty new to javascript, so this might be a dumb question.

My open Animation works great, but the close animation doesn't work/fire. it should just be as simple as reversing the animation, but that doesn't seem to work.
I have to be missing something here. Is there a better way to do this?
Been trying to figure this out all day.

HTML

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* DivTable.com */
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

JavaScript

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details ▲";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details ▼";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

here's the JSFiddle: https://jsfiddle.net/1zryo2Lp/

Answer 1

Because before the setInterval got a chance to execute document.getElementById("id-DetailsPanel").style = "display:none"; happened. A simple fix would be to move display:none line after clearInterval(int);

 function btnDetails_Click(id) { document.getElementById("id-DetailsPanel").style = "display:inherit"; document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')"); document.getElementById("id-ButtonText").innerHTML = "Details ▲"; expand(id) } function btnDismiss_Click(id) { contract(id) document.getElementById("id-ButtonText").innerHTML = "Details ▼"; document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')"); // document.getElementById("id-DetailsPanel").style = "display:none"; } function expand(id) { var detailsBox = document.getElementById("id-DetailsPanel2"); var boxHeight = 0; var int = setInterval(animate, 8); function animate() { if (boxHeight == 425) { clearInterval(int); } else { boxHeight = boxHeight + 25; detailsBox.style.height = boxHeight + 'px'; } } } function contract(id) { var detailsBox = document.getElementById("id-DetailsPanel2"); var boxHeight = 425; var int = setInterval(animate, 8); function animate() { if (boxHeight == 0) { clearInterval(int); document.getElementById("id-DetailsPanel").style = "display:none"; } else { boxHeight = boxHeight - 25; detailsBox.style.height = boxHeight + 'px'; } } } 

 .divTable { display: table; width: 100%; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { width:100%; } .divTableBody { display: table-row-group; } 

 <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell"> <button type="button" id="id" onclick="btnDetails_Click('id')"> <p id="id-ButtonText">Details &#9660;</p> </button> </div> <div class="divTableCell"> <p>Name</p> </div> <div class="divTableCell"> <p>Details</p> </div> </div> <div class="divTableFoot" style="display:none" id="id-DetailsPanel"> <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2"> <div style="margin-right:20px"> <img style="height:400px" src="http://via.placeholder.com/200x400" /> </div> <div style="width:auto"> <p>Description</p> </div> </div> </div> </div> </div>