Panel Swipe - Slide New Panels like Skype

by bizamajig

HTML

<div id="left">
<a href="#1">This link loads div1</a><br />
<a href="#2">This link loads div2</a><br />
<a href="#3">This link loads div3</a><br />
</div>

<div id="1" class="right">
Here is the info for div 1 which slides
</div>
<div id="2" class="right">
Here is the info for div 2 which slides
</div>
<div id="3" class="right">
Here is the info for div 3 which slides
</div>

CSS

#left {float:left; width:200px;}

.right {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 0;
    left: -1000px;
    padding: 0.5em;
    border: 2px solid #000;
    border-radius: 1em 0;
}

JavaScript

$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });