|
|
| 1번째 줄: |
1번째 줄: |
| <html>
| |
| <div class="container">
| |
| <button class="toggle-btn">[펼치기 · 접기]</button>
| |
| <div class="content">
| |
| <p>숨겨진 내용입니다.</p>
| |
| </div>
| |
| </div>
| |
| <style>
| |
| .container {
| |
| width: 420px;
| |
| position: relative;
| |
| }
| |
|
| |
|
| .content {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 100%;
| |
| width: 0;
| |
| height: 100%;
| |
| overflow: hidden;
| |
| transition: width 0.5s ease-in-out, left 0.5s ease-in-out;
| |
| }
| |
|
| |
| .toggle-btn {
| |
| margin-bottom: 10px;
| |
| font-size: 14px;
| |
| cursor: pointer;
| |
| }
| |
| </style>
| |
| <script>
| |
| const container = document.querySelector('.container');
| |
| const content = document.querySelector('.content');
| |
| const toggleBtn = document.querySelector('.toggle-btn');
| |
|
| |
| let isCollapsed = true;
| |
| toggleBtn.addEventListener('click', function() {
| |
| if (isCollapsed) {
| |
| content.style.width = `${container.clientWidth}px`;
| |
| content.style.left = 0;
| |
| toggleBtn.textContent = '[접기]';
| |
| } else {
| |
| content.style.width = 0;
| |
| content.style.left = '100%';
| |
| toggleBtn.textContent = '[펼치기 · 접기]';
| |
| }
| |
| isCollapsed = !isCollapsed;
| |
| });
| |
| </script>
| |
| </html>
| |