Sliding divs

by CHRIS ROBBINS

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<a id="loginPanel">left-to-right</a>
<a id="loginPanel1">right-to-left</a>
<a id="loginPanel2">mix</a>

<div id="userNav">User Area</div>

CSS

a {
    color: #000;
    cursor:pointer;
    display:block;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

JavaScript

$('#loginPanel').click(function(){
            
                if ($('#userNav').is(':hidden')) {
                   
                   $('#userNav').show('slide',{direction:'left'},1000);
                } else {
                   
                   $('#userNav').hide('slide',{direction:'left'},1000);
                }
});

$('#loginPanel1').click(function(){
            
                if ($('#userNav').is(':hidden')) {
                   
                   $('#userNav').show('slide',{direction:'right'},1000);
                } else {
                   
                   $('#userNav').hide('slide',{direction:'right'},1000);
                }
});


$('#loginPanel2').click(function(){
            
                if ($('#userNav').is(':hidden')) {
                   
                   $('#userNav').show('slide',{direction:'left'},1000);
                } else {
                   
                   $('#userNav').hide('slide',{direction:'right'},1000);
                }
});