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

<html>
<div class="foldable">
  <button class="fold-btn" onclick="fold()">▼</button>
  <button class="unfold-btn" onclick="unfold()">▲</button>
  <div class="fold-content">
    <h1>삼각김밥 레시피</h1>
    <ul>
      <li>김밥 재료 준비하기</li>
      <li>밥을 삼각김밥 모양으로 구성하기</li>
      <li>김밥에 담을 재료를 골라 넣기</li>
      <li>삼각김밥 말아내기</li>
    </ul>
  </div>
</div>

<style>
.foldable {
  overflow: hidden;
  transition: height 0.5s;
  height: 50px;
}
.fold-content {
  display: none;
}
.unfold-btn {
  display: none;
}
</style>

<script>
function fold() {
  var foldable = document.querySelector('.foldable');
  var foldBtn = document.querySelector('.fold-btn');
  var unfoldBtn = document.querySelector('.unfold-btn');
  var content = document.querySelector('.fold-content');
  foldable.style.height = '50px';
  content.style.display = 'none';
  foldBtn.style.display = 'block';
  unfoldBtn.style.display = 'none';
}

function unfold() {
  var foldable = document.querySelector('.foldable');
  var foldBtn = document.querySelector('.fold-btn');
  var unfoldBtn = document.querySelector('.unfold-btn');
  var content = document.querySelector('.fold-content');
  foldable.style.height = content.offsetHeight + 'px';
  content.style.display = 'block';
  foldBtn.style.display = 'none';
  unfoldBtn.style.display = 'block';
}
</script>
</html>