I am trying to understand the DOM through JS. When I click on the button (named collapse all, I want the section below to be collapsed (disappear), but slowly and smoothly ( a transition?), and then when I click again on the same button, I want it to appear again, and so forth... how can I achieve this through JS?
I wrote this code, but still not working repeatedly , it is working only once :
btn_all.addEventListener("click", funct1);
function funct1(e) {
section2.style.transition = "all ease 5s";
section2.style.display = "none";
for (let i = 0; i < 100; i++) {
btn_all.addEventListener("click", funct2);
function funct2(e1) {
section2.style.display = "block";
}
}};
the transition is not working...
display: none is instant - you'll want to change some attribute (like height or opacity) and then set display: none when it's done, and put the transition in the base style.
Also, accessibility guidelines (and good taste) generally state that transitions should be fast - give the impression of motion, without making them sit through an animation. 250ms is a pretty good speed
E.g.
.section {
transition: opacity ease-in .25s;
}
.section.fade-out {
opacity: 0;
}
Also, jquery has some simple transitions that generally work unless you're going supernuts in the styles, if that is available. e.g.
$(".section2").fadeOut(250);
It negates the need for a lot of nullchecking, browser compatibility workarounds, etc. and has a lot of easy shortcuts. Great for quick development and easy to approach for beginner developers.