JQuery slideUp, slideDown Javascript로 구현하기

1. 문제상황

javascript 로 클론코딩을 하던 중 jquery의 slideup, slidedown이 등장함

css animaion과는 조금 다른 이벤트라 정확하게 클론하고 싶었음.

 

2. 문제 해결(코드)

//HTML
<button id="toggleButton">토글</button>
<div id="targetElement" class="target">이 내용을 숨기거나 보이게 할 것입니다.</div>


//CSS
.target {
  overflow: hidden;
  transition: height 0.3s ease; /* 애니메이션 효과를 부드럽게 만듭니다. */
}


//Javascript
const toggleButton = document.getElementById('toggleButton');
const targetElement = document.getElementById('targetElement');

let isHidden = false;

toggleButton.addEventListener('click', () => {
  if (isHidden) {
    targetElement.style.height = 'auto';
  } else {
    targetElement.style.height = '0';
  }

  // 상태를 토글
  isHidden = !isHidden;
});

3. 결과(화면)