Take a look at this jsFiddle to see a demonstration of the slide-in technique.
Here is a breakdown of what you will discover in the above link:
Create your css so that the initial footer height is set to 0. Ensure to also adjust other css values related to footer height such as padding-bottom on #main and margin-top on #footer. Additionally, remember to apply overflow:hidden on #footer to hide the content when collapsed.
In the click() function for your link, use jQuery's animate() method to increase the height of #footer (along with necessary padding/margin adjustments).
The animate() function has four parameters (see documentation), with the last one being a callback function that executes once the animation is complete. You can perform your link swapping within this callback function.
If you are starting with the HTML/CSS from CSSStickyFooter, the remaining code would appear as follows...
Your CSS (this must be placed after the stickyfooter css):
#main {
padding-bottom: 0;
}
#footer {
margin-top: 0;
height: 0;
overflow:hidden;
}
And your Javascript should resemble this:
$(document).ready(function(){
$('#showFooter').click(function(evt) {
$('#footer').animate({
'margin-top' : -150,
'height' : 150
}, null, null, function() {
alert("footer slide-in is complete.");
// Implement your "link swap" operation here.
});
$('#main').animate({
'padding-bottom' : 150
});
});
});
Edit: If you wish to have the footer initially visible (at a smaller size) and then expand to a larger size, simply set any desired height (instead of 0) in the provided CSS code.
You can insert any preferred content into the footer div -- if you want to display different sets of content when it's small versus large, place these blocks into two separate divs within the footer. Set them as position:absolute;top:0; so they overlap within the footer. Initially, set the "expanded view" to display:none and later utilize jQuery's fadeIn() and fadeOut() functions within the click handler or animate callback to toggle visibility between the expanded and collapsed views within the footer.
Check out this adjusted jsFiddle example
For a more sophisticated approach, consider making the footer heights dependent on the content views. (This might be a preferable option).
View this "fancier" jsFiddle calculating heights based on content
Edit: To enhance smoothness and prevent flashing scrollbar during the animation, switch the order of the two animate calls (placing $('#main').animate(...) before $('#footer').animate(...)). This adjustment ensures better animation flow without flickering scrollbars. See the updated jsFiddle demonstrating this change.