how can I collapse (forth and back) a section when I click on a button through JS?-CodePudding

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 :

const section1 = document.querySelector(".section1")
const section2 = document.querySelector(".section2")
const section3 = document.querySelector(".section3")
const btn_all = document.querySelector(".collapse-all")
btn_all.addEventListener("click", funct1);
function funct1(e) {
section2.style.display="none";
section2.style.transition="all ease 5s";
}

the transition is not working...

CodePudding user response：

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.

CodePudding user response：

Count Spatula, this does not answer my question ! I want to make section 2 disappear when I click on "Collapse all", and make it reappear when I click on the same button again. and I want to do this with vanilla JS please, since I am learning JS , not jQuery !