Sliding divs horizontally with JQuery

Question

so I'm very new to Javascript and Jquery. What I'd like to create is a two column page where links on the left column will cause a div on the right to slide in horizontally from left to right, and slide out of view when clicked again. I know I need to use slide toggle effect but I'm having trouble implementing it in a way that each individual link causes a different div to slide... I've attempted to tweak a few jsfiddles I've found via google searches but I'm pretty lost when it comes to javascript.

So far this is the only fiddle I've been able to tweak successfully... http://jsfiddle.net/bridget_kilgallon/HAQyK/
but those slide vertically, and load all the divs when clicked.

Here's a fiddle I've created for the pagelayout I'd like without any javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/

Please help! :) -Bridget

Answer 1

Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.

The only thing you want is some creative use of the animate() function in jQuery to achieve an effect.

I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:

http://jsfiddle.net/sg3s/rs2QK/ - This one slides panel open from the left and to close to the right

http://jsfiddle.net/sg3s/RZpbK/ - Panels slide open from left to right and close to the left befor opening the new one.

Resources:

• http://api.jquery.com/animate/

You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.