요소 슬라이드 - 슬라이드 영역 토글

토글 버튼을 누르면 프로모션 영역이 접히거나 펼쳐지게 구현
JS로는 반응에 대한 이벤트를 받고 .hide 클래스를 넣고 빼는 기능만 작성하고, 변화 내용은 CSS에서 .hide 클래스에 작성
JS에 직접적으로 작성하는 것 보다는 해당 방식이 최적화에 더 적합

코드

CSS

.notice .promotion.hide {
  height: 0;
}

JS

const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
let isHidePromotion = false;
promotionToggleBtn.addEventListener('click', function() {
  isHidePromotion = !isHidePromotion;
  if (isHidePromotion) {
    //숨김 처리
    promotionEl.classList.add('hide');
  } else {
    //보임 처리
    promotionEl.classList.remove('hide');
  }
});