jQuery slideOpen from fixed to auto

Published on 17 Oct 2016 , edited on 22 Mar 2019

I came across this little problem trying to do something that seems obvious; animate a div sliding open from a fixed height in pixels to a full auto height. Apparently this is something jQuery can’t do out of the box, at least not without some help. It uses a DOM node known as scrollHeight. In here the browser (up to IE8!) store the original height an element would have. We access it in the code to set it as the ‘auto’ value it should’ve have. get(0) allows us to grab those DOM elements.

The function after gives the element the native height: auto to allow for better function with other scripts and styles and adds class="open" for an easy check to reverse animation. Seems excessive for such a simple task, and it’s a shame you’ll have to ‘reset’ the height again in the script (maybe this works, but again, very excessive).

See the Pen jQuery slideOpen from px to auto by Alex Timmer (@asitis) on CodePen.

Snippets

Short notes and snippets as reminders for myself and my work.

All categories

All tags

All posts