HTML:

<div id="sidePanel">
    <div id="panelContent">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&width=200&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>      
    </div>
    <div id="panelHandle">
        <p>Facebook</p>
    </div>
 
</div>

JQuery:

jQuery(function($) {
    $(document).ready(function() {
        $('#panelHandle').hover(function() {
            $('#sidePanel').stop(true, false).animate({
                'left': '0px'
            }, 900);
        }, function() {
            jQuery.noConflict();
        });
 
        jQuery('#sidePanel').hover(function() {
            // Do nothing
        }, function() {
 
            jQuery.noConflict();
            jQuery('#sidePanel').animate({
                left: '-201px'
            }, 800);
 
        });
    });
});

Just made a simple slide left right toggle functionality using JQuery. Check out the demo here : bit.ly/…