How to collapse section using Javascript on single click?

Question

I know this question has been asked multiple times and I have tried different things which are not working.

All I want to do is collapse a section on the click of a button, but I have to click button twice before it actually collapses ( In CollapseGrid is getting printed twice and then it goes to In Collapse ).

How do we make it work in one go without having to click twice?

 function collapseGrid(element) { console.log("In CollapseGrid"); element.addEventListener("click", collapse); }; function collapse() { console.log("In Collapse"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }

 <button class="info" onClick="collapseGrid(this)">CLICK</button> <div class="contnet"> <p>This should be collapsed.</p> </div>

Answer 1

Your section gets collapsed on the second click because on the first click you are simply assigning a click listener, but not really executing the collapse function. The code you included inside collapseGrid() should be written outside of the function. Then just make the button invoke collapse() rather than collapseGrid() .

 document.querySelector(".info").addEventListener("click", collapse); function collapse(e) { var content = e.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }

 <button class="info" onClick="collapse(this)">CLICK</button> <div class="contnet" style="display:block"> <p>This should be collapsed.</p> </div>

Answer 2

Here is a simple way to achieve it with a fairly generic function and a some data attributes.

 var elements = document.querySelectorAll('[data-toggle="collapse"]'); elements.forEach(element => element.addEventListener('click', collapse)); function collapse() { var target = this.getAttribute('data-target'); var element = document.getElementById(target); element.style.display = element.style.display == "none"? "block": "none"; }

 <div> <button class="info" data-toggle="collapse" data-target="collapse1">CLICK 1</button> <div class="content" id="collapse1"> <p>This should be collapsed.</p> </div> </div> <div> <button class="info" data-toggle="collapse" data-target="collapse2">CLICK 2</button> <div class="content" id="collapse2"> <p>This should be collapsed.</p> </div> </div>

Answer 3

Why don't you simply collapse the next element in the collapseGrid function? eg

 function collapseGrid(me) { var content = me.nextElementSibling; content.style.display = content.style.display == "none"? "block": "none"; }

 <button class="info" onClick="collapseGrid(this)">CLICK</button> <div class="content"> <p>This should be collapsed.</p> </div>