~/dev/바닐라에서-jquery-slidetoggle-구현하기 $ cat article.md
# JavaScript

바닐라에서 jQuery slideToggle 구현하기

개발 · · 1분 읽기
바닐라에서 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을 원하는 값만큼 주시면 애니메이션 진행 시간을 변경하실 수 있습니다.

공유하기 X LinkedIn
~/comments $ tail -f comments.log
marshall@blog: ~/comments#comments
님에게 답글
내 아바타

— 작성한 댓글은 수정하거나 삭제할 수 없습니다 —

댓글을 불러오는 중...

개발 카테고리 관련 글

위 글이 유용하셨다면, 아래 글도 읽어보세요!