javascript - div 태그에서 차례로 닫고 여는 방법

기본적으로 축소 가능한 div를 쉽게 새로 고치려고합니다. 데이터를 변경하고 싶을 때 기본적으로 div가 열려 있으면 닫히고 열리고 닫히면 div를 여는 스크립트를 실행할 수 있습니다. 내 목표는 이와 비슷한 것을 사용하는 것입니다.

$("#procDiv").html("New Data");
if($("#procDiv").attr('class').contains("collapse in")) {
    $("#procDiv").collapse("close");
    $("#procDiv").collapse("open");
} else {
    $("#procDiv").collapse("open");
}

그러나 애니메이션에 있다고 가정하여 새로운 지침을 기대하지 않기 때문에 열어야 할 때 열리지 않기 때문에 문제가 발생합니다. .

HTML

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="inputAirport">Airport</label>
    <input type="text" class="form-control" id="inputAirport" placeholder="Airport">
  </div>
  <button class="btn btn-primary btn-sm btn-search">Search</button>
</form>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#procDiv">Procedures</a>
        </h4>
    </div>
    <div id="procDiv" class="panel-collapse collapse"></div>
</div>