Collapse and expand div without scrollbars appearing : <p>I am using Jquery to try to collapse a div.  The  element to be collapsed sits above a footer on the page, as illustrated below:</p>

<p><a href="https://i.stack.imgur.com/0Lvt3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Lvt3.png" alt="Initial state"></a></p>

<p>I have a button on the page that when clicked on, calls .animate() to move the div above the footer down so it appears to slide behind the footer and out of view - basically, to collapse down.</p>

<p>However, when the div moves beyond the bottom of the window, the browsers vertical scrollbar becomes active until I hide the div being collapsed, ie:</p>

<p><a href="https://i.stack.imgur.com/ysoAx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ysoAx.png" alt="div collapses down behind footer"></a></p>

<p>I would like to see the div collapse down to nothing WITHOUT the vertical scrollbar effect.</p>

<p>I also tried to animate on the height, but that causes the div to shrink starting at the bottom moving UP until the height is zero.</p>

<p>What is the trick to having a div collapse DOWN to nothing without having the vertical scroll bar becoming active?  Do I have to adjust both top and height?</p>

<p>Thanks in advance.</p>
