728x90
show hide animation javascript
-
collapse toggle(show&hide) vanilla javascript프론트엔드/javascript 2022. 1. 11. 12:26
collapse toggle(show&hide) vanilla javascript '접혔다 펼쳤다' 를 자바스크립트로 구현할 때, 단순히 '있다 없다' 를 구현하기는 쉽지만, 자연스럽게 '접혔다 펼쳤다' 를 구현하기는 생각보다 까다롭다. jquery 로 구현할 때는 자연스럽게 구현하는 것에 대한 고민을 할 필요가 없다. $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); jquery 라이브러리 도움 없이 pure javascript로만 자연스러운 toggle 기능을 구현할 때 어려운 점은, 펼쳐진 영역의 height 값을 알아내기가 까다롭다는 점이다. (height auto 이면 transition..