Francis Alvin Tan Francis Alvin Tan - 1 year ago 94
jQuery Question

how to make div slide from right to left

got a code here from someone....

what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.


<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>


#loginPanel {
color: #000;

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


// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
} else {

// Toggle Panel and Set Cookie //
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');

Please need help on this one. just to make the div slide right to left

here is the fiddle

Answer Source

You can use jQueryUI and additional effects Slide


$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);

You can't use .slideToggle() to slide from left to right or vice versa, from

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

You should try and change your code to implement this code, but I think it's maybe better if you try with @s15199d answer, than you don't need to use jQueryUI

Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:

Ok, created another fiddle with cookies