Footer animation and jQuery?

Question

I have a footer which I keep o the bottom of my page using sticky footer css. I'd like my footer to start collapsed and when the user clicks on a button, I want it to expand and then swap the "expand" link with a different container div inside the footer div.

How would I accomplish this with jQuery, HTML and CSS?

EDIT:

I want the footer to start with a height of about 20px. In the footer, there should be a button (a link, I guess) that says "more" or "about". When the user clicks, the footer should get taller and show a more elaborate div, with alternate content (not the "more" link).

Answer 1

This jsFiddle demonstrates the basic approach to take for the slide-in.

Here's the summary of what you'll find there:

1. Build your css so that the initial footer height is 0. Make sure to also zero out the other css values that depend on footer height (namely padding-bottom on #main, and margin-top on #footer). You'll also need to set overflow:hidden on #footer, in order to ensure that the footer contents is invisible when it is collapsed.

2. in the click() handler for your link, use jQuery's animate() function to increase the height of #footer (and to make the other necessary padding/margin adjustments simultaneously).

3. the animate() function takes four parameters (see docs here), the last one is a callback that will fire when the animation completes. You can trigger your link swapping from within this callback function.

So, assuming that you're starting with the HTML/CSS from CSSStickyFooter, the rest of your code would look something like the following...

Your CSS (this goes after the stickyfooter css):

#main { 
    padding-bottom: 0; 
}  
#footer { 
    margin-top: 0;
    height: 0; 
    overflow:hidden;
} 

And your Javascript would look like this:

$(document).ready(function(){
    $('#showFooter').click(function(evt) {
        $('#footer').animate({
            'margin-top' : -150,
            'height' : 150
        }, null, null, function() {
            alert("footer slide-in is complete.");
            // do your "link swap" operation (whatever it is) right here. 
        });
        $('#main').animate({
            'padding-bottom' : 150
        });
    });
});

---

Edit: if you want to have the footer visible initially (at some smaller size), then have it "slide out" to a larger size, just set whatever height you want (instead of 0) in the css I've shown above.

You can put whatever content you like into the footer div -- so if you want to show one set of content when it's small, and different content when it's big, then just put those blocks into two separate divs, within the footer. set them position:absolute;top:0;, so they'll be on-top-of each other within the footer. set the "expanded view" to be display:none initially, and then use jquery's fadeIn() and fadeOut() functions, within the click handler (or the animate callback), to swap the visibility of the expanded and collapsed views within the footer.

Here's the jsFiddle example, adjusted accordingly

---

Now, if you really want to get fancy, you can make the footer heights dependent on the height of the two different content views. (This is probably what I'd do).

here's a "fancier" jsFiddle that figures the heights from the content

---

Edit: If you swap the order of the two animate calls (so $('#main').animate(...) comes before $('#footer').animate(...)), the animation will run more smoothly, and the scrollbar won't flash on/off during the animation. (I should have shown it this way originally). here's an updated jsFiddle, that shows this minor change.