|
|
| 1번째 줄: |
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>
| |