연습장:Sakura/1 문서 원본 보기

<html>
  <head>
    <style>
      .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
      }

      .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #f1f1f1;
        transition: max-height 0.2s ease-out;
      }

      .active, .collapsible:hover {
        background-color: #555;
      }
    </style>
  </head>
  <body>

    <h2>펼치기/접기 테스트</h2>
    
    <button class="collapsible" id="collapsible">펼치기/접기</button>
    <div class="content" id="content">
      <p>펼침/접음 내용</p>
    </div>

    <script>
      var coll = document.getElementById("collapsible");
      var content = document.getElementById("content");

      coll.addEventListener("click", function() {
        this.classList.toggle("active");
        if (content.style.display === "block") {
          content.style.height = "0px";
          content.style.width = "0px";
          content.style.border = "none";
          setTimeout(function() {
            content.style.display = "none";
          }, 400);
        } else {
          content.style.display = "block";
          var height = content.scrollHeight + "px";
          content.style.height = height;
          content.style.width = "100%";
          content.style.border = "1px solid black";
        } 
      });
    </script>

  </body>
</html>