<html>
숨겨진 내용입니다.
<button class="toggle-btn">[펼치기 · 접기]</button>
<style> .container {
width: 420px; overflow: hidden; position: relative; transition: height 0.3s ease-in-out;
}
.content {
position: absolute; left: 0; top: 0; width: 100%; height: auto; padding: 20px; box-sizing: border-box;
}
.toggle-btn {
position: absolute; right: 20px; bottom: 20px; padding: 5px 10px; font-size: 14px; line-height: 1; background-color: #fff; color: #000; border: 1px solid #000; 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) {
container.style.height = `${content.offsetHeight}px`;
toggleBtn.textContent = '[접기]';
} else {
container.style.height = `${toggleBtn.offsetHeight}px`;
toggleBtn.textContent = '[펼치기 · 접기]';
}
isCollapsed = !isCollapsed;
}); </script>