How to slide content opening up with jquery

Question

My designer handed me a design I'm not 100% sure how to do with jquery and css. I am basicly trying to allow a user to "slide" the footer up to reveal more conent.

My html..

 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

I have a toggle button that onclick

$('#expandingFooter').slideToggle();

This slides the expanding footer content open downward, then slides back up to close. I would like it to slide up and then close down.

Thanks

Answer 1

You can leverage JQuery UI 1.6's Effects (Effects Demo Page). The following accomplished the desired effect for me.

$('#toggleButton').bind('click', function(e) {
    $('#expandingFooter').toggle(
        'slide', 
        { easing: 'easeOutQuint', direction: 'down' }, 
        1000
    );
});

Note: You may want to play with the easing parameter to get the desired smoothness of the effect.

You'll need to have the latest versions of both JQuery and JQuery UI Slide Effect to do this.