배너 이미지

바닐라에서 jQuery slideToggle 구현하기

최종 수정일 : (10개월 전)

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을 원하는 값만큼 주시면 애니메이션 진행 시간을 변경하실 수 있습니다.


profile

이메일 주소는 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭