I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px.
Here is the HTML code:
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
This is the CSS:
#loginPanel {
color: #000;
cursor:pointer;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
And here is the Jquery code:
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
$('#userNav').slideDown('fast');
} else {
$('#userNav').slideUp('fast');
}
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');
}
});
});
If anyone can assist me in achieving the sliding effect from right to left, it would be greatly appreciated.
For reference, here is the fiddle http://jsfiddle.net/7m7uK/195/