Davide Caffaratti blog

This is my simple class for make content slider more simple.

With this class can made multiple text slider and configure text, styles and more.

VIEW THE EXAMPLE FILE

var MooSlider = new Class({

Implements: [Options],

options: {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration: 340,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Bounce.easeOut,
textOpen: '+ Open',
textClose: '- Close',
elementsOpen: []
},

initialize: function(elements, options) {
this.setOptions(options);

// Set elements
this.setSlide(elements);
},

setSlide: function(elements) {
var status = {
'true': this.options.textOpen,
'false': this.options.textClose
};

$$(elements).each(function(div){

var isClose = (this.options.elementsOpen.indexOf(div.getProperty('id')) == -1);

if (this.options.createToggle) {
var link = new Element(this.options.tagToggle, { 'html': isClose?this.options.textOpen:this.options.textClose, 'class': this.options.cssToggle.replace('.',''), 'style': 'cursor:pointer;' } ).inject(div, 'top');
}
else {
var link = div.getElement(this.options.cssToggle).setStyle('cursor', 'pointer').set('class', this.options.cssToggle.replace('.',''));
}

this.hide = div.getElement(this.options.cssHide);

var fx = new Fx.Slide(this.hide, {
duration: this.options.slideDuration,
mode: this.options.slideMode,
transition: this.options.slideTransitions
})

fx.addEvent('complete', function() {
link.set('html', fx.open?status[false]:status[true]);
});

if (isClose) {
fx.hide();
}
else {
fx.show();
}

link.addEvent('click', function(e){
e.stop();
fx.toggle();
});

}, this);
}
})

For init the class use this:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="mootools-1.2.2.2-more.js" type="text/javascript"  charset="utf-8"></script>
<script src="moo-slider-min.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
<pre id="line1">    var slider = new MooSlider('.slide', {
    createToggle: true,
    tagToggle: 'a',
    cssHide: '.hide',
    cssToggle: '.toggle',
    slideDuration:340,
    slideMode: 'vertical',
    slideTransitions: Fx.Transitions.Pow.easeOut,
    textOpen: '+ View more',
    textClose: '- Close more',
    elementsOpen: []
    });
});
//]]></pre>
</script>

And this is the html for the sliders contents:

<div class="slide">
<div class="hide">
<h1>Slide 1</h1>
This is my html code for this slide
</div>
</div>
<div class="slide">
<div class="hide">
<h1>Slide 2</h1>
This is my html code for this slide
</div>
</div>