HTML :
<article class="td"><section> ...</section>
<section> ... </section>
</article>
CSS
.hide {
overflow : hidden;
opacity:0;
max-height : 0px;
transition:all 2s ease;
padding : 10px;
}
article>section+section {
max-height : 300px;
overflow : hidden;
opacity:1;
background-color : black;
color : white;
padding : 10px;
transition:all 2s ease;
}
JS
class tdHandler {constructor(el) { // el = article
this.el= el;
}
init() {
this.el.addEventListener("click", () => this.action(), false);
return this;
}
action( ) {
this.el.lastElementChild.classList.toggle('hide');
return this;
}
};
Array.from(document.querySelectorAll('.td'), (el) =>{
let h = new tdHandler(el).init().action();
});
code
https://jsbin.com/dobeper/2/edit?html,css,js,output