A few years ago I was looking for a simple JavaScript to animate the hiding/showing of a div. I came across one that was perfect from harrymaugans.com but the site is currently undergoing a revamp so the original post is no longer there. Anyway the script was perfect but it had one issue, it required that the div’s height be already set and I was working with dynamically populated divs that I wouldn’t know the size of. My original solution was to loop through the divs I was going to hide and set their height to what their height currently was (if that makes sense) before hiding them with display: none;. Anyway I got sidetracked and I felt this solution was inadequate anyway so left it in my test folder. Jump to the present day. I started looking at it again and realised I can grab the original height of the div once it’s display had been changed back to block by the script and it’s height set to 1px ready for the sliding into view. The solution was simply to use scrollHeight which gets the height of a div including any hidden content such as when overflow is set to hidden.
I also added a new function, toggleSlide, which means instead of needing a link to call the slideDown and then one to call the slideUp you can just call toggleSlide and it will either slide it up or down depending on it’s current state.
And so I am offering my version of the script here since I think some people might be in the same boat as me and find my solution useful and also because the original source is no longer available.
Last Comments