I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath it that pushes down any elements below it by the same height as the animated css value.
Here is the code snippet used:
$("#close").hide();
$("#open").click(function () {
$("#draw").animate({height:"450px"},"slow");
$("#container").animate({top:"-450px"},"slow");
$("#open").hide();
$("#close").show();
});
$("#close, .shadow").click(function () {
$("#draw").animate({height:"0px"},"slow");
$("#container").animate({top:"0px"},"slow");
$("#open").show();
$("#close").hide();
});
To better understand what I am explaining, please visit and click on the "open" option in the footer.
Your assistance on this matter would be greatly appreciated.
Update: I apologize for any confusion, my actual intention is to have the main container div move upwards in a similar manner (or at least create a similar effect), causing the content above to disappear off the page in relation to the newly expanded bottom div.