====== Fx.Slide ====== Here is the [[http://docs.mootools.net/Plugins/Fx/Fx.Slide|documentation for Fx.Slide.js]]. The slide slides an element in horizontally or vertically, the contents will fold inside. Extends //[[00-fx|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

===== A Better Example ===== Here's how you might actually use it in the real world:

Show some stuff

I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me.

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


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