JQuery Left side Slide

JQuery Slide Left Right

JQuery Slide Left Right

JQuery Slide Left Right | JQuery Toggle Left Right

              Recently I completed a project where I had to show a panel to the left side usingJQuery, on mouse hover it comes out and on mouse leave it goes back. Its seems to be easy but to maintain the functionality is not that easy.
        Here’s a small snippet on how to do it.in 4 steps

step1:-HTML

<div id="sidePanel">
        <div id="panelContent">
          <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;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>


step2:-css code

/* ===== Primary Styles ========================================================
   Author: NTechi | WebsTutorial
   ========================================================================== */
body{
    font-family:Arial;
}

#sidePanel{
    width:245px;
    position:fixed;
    left:-202px;
    top:15%;
    
}
#panelHandle{
    background-image: -webkit-linear-gradient(top,#333,#222);
    background-image: -moz-linear-gradient(center top , #333333, #222222);
    background-image: -o-linear-gradient(center top , #333333, #222222);
    background-image: -ms-linear-gradient(center top , #333333, #222222);
    background-image:linear-gradient(center top , #333333, #222222);

    height:150px;
    width:40px;
    border-radius:0 5px 5px 0;
    float:left;
    cursor:pointer;
}
#panelContent{
    float:left;
    border:1px solid #333333;
    width:200px;
    height:300px;
    background-color:#EEEEEE;
}

#panelHandle p {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    left: -4px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 26px;
}

step3:-javascript code

 <script type="text/javascript">
        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);

                });
            });
        });
    </script>