바닐라에서 jQuery slideToggle 구현하기

개발

바닐라에서 jQuery slideToggle 구현하기
최종 수정일:

jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.
최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다.

function toggleSlide(element) {
    let a;
    0 === element.offsetHeight ? (
        element.style.height = "auto",
        a = element.offsetHeight,
        element.style.height = 0,
        void element.offsetHeight,
        element.style.height = `${a}px`
    ) : element.style.height = 0
}

함수를 실행하면 요소의 높이를 변경합니다. 요소에 transition을 원하는 값만큼 주시면 애니메이션 진행 시간을 변경하실 수 있습니다.

Report an issue