연습장:Sakura/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: 100%;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 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.height = `${content.scrollHeight}px`;
    toggleBtn.textContent = '[접기]';
  } else {
    content.style.height = 0;
    toggleBtn.textContent = '[펼치기 · 접기]';
  }
  isCollapsed = !isCollapsed;
});
</script>
</html>