테이블 접기 펴기

<!-- 접기 펴기 자바스크립트-->
<script type="text/javascript">
var elements = document.getElementsByTagName("div");

// 모든 영역 접기
for (var i = 0; i < elements.length; i++) {
  if (elements[i].className == "elements") {
    elements[i].style.display="none";
  } else if (elements[i].className == "label") {
    elements[i].onclick=switchDisplay;
  }
}

// 상태에 따라 접거나 펼치기
function switchDisplay() {

  var parent = this.parentNode;
  var target = parent.getElementsByTagName("div")[1];

  if (target.style.display == "none") {
    target.style.display="block";
  } else {
    target.style.display="none";
  }
  return false;
}
</script>
</body>

 

내용상단

<form>
  <div>
    <div id="section1" class="label" >
      <p><button type="button" class="btn btn-primary" style="width:100%">차량예약하기</button></p>
    </div>
    <div id="section1b" class="elements">

-- 내용을  --

 

하단

 </div>
    </div>
  <div>