Fossil SCM
Remove some unnecessary `bind()' calls for variables already held in function closure. Apart from that, the approach seems to work well and also covers odd cases, such as the post-expansion timeout to clear maxHeight being shorter than the CSS animation duration (in which case the animation would just jerkily stop, but with the correct element height), or setting a short "decoy value" (say, "100px") instead of the real scrollHeight for maxHeight (in which case the animated area would just be smaller, but with the same end result).
Commit
7b8dd9ca70e5171717b09f7e71d56dcdb38dfb554c1b2464cddbf5b18088b52f
Parent
6c591c3ffa8ef4d…
1 file changed
+3
-3
+3
-3
| --- src/accordion.js | ||
| +++ src/accordion.js | ||
| @@ -24,16 +24,16 @@ | ||
| 24 | 24 | a[i].addEventListener("click",function(){ |
| 25 | 25 | var x = this.nextElementSibling; |
| 26 | 26 | if( this.classList.contains("accordion_closed") ){ |
| 27 | 27 | x.style.maxHeight = x.scrollHeight + "px"; |
| 28 | 28 | setTimeout(function(){ |
| 29 | - this.style.maxHeight = ""; | |
| 30 | - }.bind(x),250); // default.css: .accordion_panel { transition-duration } | |
| 29 | + x.style.maxHeight = ""; | |
| 30 | + },250); // default.css: .accordion_panel { transition-duration } | |
| 31 | 31 | }else{ |
| 32 | 32 | x.style.maxHeight = x.scrollHeight + "px"; |
| 33 | 33 | setTimeout(function(){ |
| 34 | 34 | x.style.maxHeight = "0"; |
| 35 | - }.bind(x),1); | |
| 35 | + },1); | |
| 36 | 36 | } |
| 37 | 37 | this.classList.toggle("accordion_closed"); |
| 38 | 38 | }); |
| 39 | 39 | } |
| 40 | 40 |
| --- src/accordion.js | |
| +++ src/accordion.js | |
| @@ -24,16 +24,16 @@ | |
| 24 | a[i].addEventListener("click",function(){ |
| 25 | var x = this.nextElementSibling; |
| 26 | if( this.classList.contains("accordion_closed") ){ |
| 27 | x.style.maxHeight = x.scrollHeight + "px"; |
| 28 | setTimeout(function(){ |
| 29 | this.style.maxHeight = ""; |
| 30 | }.bind(x),250); // default.css: .accordion_panel { transition-duration } |
| 31 | }else{ |
| 32 | x.style.maxHeight = x.scrollHeight + "px"; |
| 33 | setTimeout(function(){ |
| 34 | x.style.maxHeight = "0"; |
| 35 | }.bind(x),1); |
| 36 | } |
| 37 | this.classList.toggle("accordion_closed"); |
| 38 | }); |
| 39 | } |
| 40 |
| --- src/accordion.js | |
| +++ src/accordion.js | |
| @@ -24,16 +24,16 @@ | |
| 24 | a[i].addEventListener("click",function(){ |
| 25 | var x = this.nextElementSibling; |
| 26 | if( this.classList.contains("accordion_closed") ){ |
| 27 | x.style.maxHeight = x.scrollHeight + "px"; |
| 28 | setTimeout(function(){ |
| 29 | x.style.maxHeight = ""; |
| 30 | },250); // default.css: .accordion_panel { transition-duration } |
| 31 | }else{ |
| 32 | x.style.maxHeight = x.scrollHeight + "px"; |
| 33 | setTimeout(function(){ |
| 34 | x.style.maxHeight = "0"; |
| 35 | },1); |
| 36 | } |
| 37 | this.classList.toggle("accordion_closed"); |
| 38 | }); |
| 39 | } |
| 40 |