Fx.Slide

Here is the documentation for Fx.Slide.js.

The slide slides an element in horizontally or vertically, the contents will fold inside. Extends Fx, inherits all its properties.

Think of this like an old school cash register. When you punch the keys, the value slides into view. Currently the only two directions are sliding in from the top (like a window shade) and in from the left.

Options:

mode

set it to vertical or horizontal. Defaults to vertical.

and all the Fx options

Here's a box with a box in it that we'll slide around:

First, we have to create the slider object: (note that I've already executed this code for you).

var mySlider = new Fx.Slide('sliderButton', {duration: 500});

Then we can play with it:

mySlider.toggle() //toggle the slider up and down.

mySlider.slideIn()

mySlider.slideOut()

mySlider.hide() //hides the element without a transition

mySlider.show() //shows the element without a transition

Here's how you might actually use it in the real world:

Note that there's an element shortcut for the "built-in" version of Fx.Slide:

$('slider2').addEvent('click', function(){
  $('slider2Content').slide('toggle');
});