dropDown function - When pressing multiple times and fast setTimeout deletes border when the height is 500px

Question

First of all, no, I'm not going to use jQuery.

So, I have this project I'm working on, and I want to do a slide toggle element. Everything is nice and good until I press the button really fast. Then the borders dissapear and the element has reached its final height(500 px in this case).

Perhaps my explanation wasn't that accurate, but I'll give you the code.

 var div = document.getElementById('div'); var btn = document.getElementById('button'); function clickFunction(){ if(div.style.height === "0px") { div.style.height = "500px"; div.style.borderStyle = "solid"; } else { div.style.height = "0px"; setTimeout(function(){div.style.borderStyle = "none";}, 500); } } btn.onclick = clickFunction; 

 div#div { transition: 500ms ease; width: 100px; height: 200px; margin-top: 20px; } .container { width: 120px; background-color: red; padding: 8px; } 

 <button id="button"> Press me </button> <div class="container"> <div id="div" style="border-style: none; border-width: 2px; height: 0px;"></div> </div> 

I also tried using clearTimeout() but it wasn't working. Yes, I set setTimeout as a variable, but it doesn't do anything.

Any ideas? Cheers.

Answer 1

Your current code uses combinations of inline styles and an id selector in conjunction with the inline style being updated by JavaScript in an if/then as well as with a setTimeout() callback. All of these instructions, coupled with the speed at which the client can repaint the UI are all contributing to the problem.

By cleaning up the approach to toggling the styles and how the styles are applied in the first place, there is much less potential conflict in instructions and timing.

Remove all the static styles from the HTML and set up CSS classes for the normal and expanded states of the element. Then just use the element.classList.toggle() method to seamlessly toggle the use of the expanded class. No timers needed.

 var div = document.getElementById('div'); var btn = document.getElementById('button'); btn.addEventListener("click", function(){ div.classList.toggle("expanded"); }); 

 .container { width: 120px; background-color: red; padding: 8px; } .normal { transition: 500ms ease; width: 100px; margin-top: 20px; border:0px solid black; height: 0px; } .expanded { height: 200px; border:2px solid black; } 

 <button id="button">Press me</button> <div class="container"> <div id="div" class="normal"></div> </div> 

NOTE:

Be careful when setting up CSS selectors that are id based because they become very difficult to override later. I'm not saying never use them, but more often than not, CSS classes provided the most flexible solutions and help to avoid gobs and gobs of inline styles.