jQuery - Sliding Text Panels Effect

I have the following code in HTML/CSS: http://jsfiddle.net/XmRNh/

As you can see, there is an "About" container, with three "Slides" inside. The 1st slide is always open. The initial state of the 2nd and 3rd slide is that they are hidden off-screen.

I would like to use jQuery to "slide" the second and third slide into p开发者_运维技巧lace when the appropriate button is clicked, and then slide it off screen when the appropriate close button is clicked.

I can see in the jQuery documentation how to slideUp and slideDown, but not how to slide left or slide right. Can anyone help me accomplish this?

Thanks Zach

EDIT: Is it possible to have the first slide off-screen/hidden when the page loads, and have it slide in from the left as soon as the page loads?

---

Check out http://docs.jquery.com/UI/Effects/Slide - using the show / hide methods you can pass more parameters such as the direction. E.g.

$('#about-slide-2').show("slide", { direction: "left" }, 1000);

To show the first panel upon loading you would set it's display style to none in the html like this

style='display:none'

Then use this javascript

$(function() {
  $('#about-slide-1').show("slide", { direction: "left" }, 1000);
});

Please note that these effects are included in jQueryUI, not in standard jQuery, but I think you can download a custom build of it that just includes the effects you need.

---

I know for something like that you would need to use the .animate() function in jQuery

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

This tutorial from a couple of years ago gave an example of sliding using the width of a div.

$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

Tutorial: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

I could be wrong about this, but I'm confident that's the right way to do it.

Best of Luck!