slideToggle from right to left

Question

I made this looking at a tutorial but I see no option there to make it work from the right side to the left. I wan't it to be attached to the right side of the body.

Link to the fiddle

Answer 1

From the jQuery docs:

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.

So it would appear that doing it from side to side, is not an option (with that method), if you're looking at a tutorial, your easies bet is to just add jQuery UI to your project and use it's animations methods. That will leave it as easy as:

$(this).hide('slide',{direction:'left'},1000); //or show

However, you may want to learn to do it without jQuery UI (yaiii) and it's not so hard after all. You need to break down what jQuery UI (I assume) is doing, something on the lines of:

$(this).animate({ marginLeft: "100%"} , 1000);

On both examples, you need to replace this with your selector for the element you want to animate of course, but since you're learning I thought I'd point it out.

Answer 2

you might also consider the plugin:

http://www.webinventif.fr/wslide-plugin/

The page is in french, but the plugin is self-explaining.

Hope this helps