How to add a "handle bar" to a sliding div

I have a small splash page and have a browser-wide div that acts as a wrapper and have a div inside of #wrapper that is attached to a $.click(); event to slide the wrapper div out to view the browser-size background photo. I'm wanting to imp开发者_如何学Clement a small button/link that will slide in on the bottom right corner after the wrapper div is hidden.

I know it is probably mainly CSS, but am needing some help.

Thanks in advance for your help!

PS: Using jQuery as my framework.

The key is in the callback of the animation of the #wrapper. I assumed that:

1. the entire content of the page is inside the #wrapper, and used it to calculate the height of the content.
2. it's possible for the content to be higher than the browser window.
3. you won't be supporting IE6, and thus be able to use position: fixed;.

CSS:

#toggler {
    position: fixed;
    width: 20px;
    height: 20px;
    left: 0;
    display: none;
    }

JS:

jQuery(document).ready(function() {
    var windowHeight = jQuery(window).height(),
        togglerHeight = jQuery('#toggler').height(),
        togglerTopPosition = windowHeight - togglerHeight;

    jQuery(#toggler).css('top', togglerTopPosition + 'px');

    jQuery('#wrapper').click(function() {
        // take care of hiding the #wrapper
        jQuery('#wrapper').animate({
            yourSettings, 
            yourDuration, 
            function() { jQuery(#toggler).show(); } // callback
        });
    });

    jQuery('#toggler').click(function() {
        jQuery(this).hide();
        jQuery('#wrapper').animate({...});
    });
});

As you can guess, #toggler is the little button/link. Style it as you will, and change the width and height as needed.