Just add this code at the very end of your script. you can customize the speed and effect by changing the duration and transition [quote]window.addEvent('domready', function(){ $$('.commonbox').each(function(box){ var slider = new Fx.Slide(box.getElement('div'), { [b]transition: Fx.Transitions.Sine.easeInOut[/b], [b]duration: 500[/b] }); var header = box.getElement('h2') || box.getElement('h1'); //you may omit the next line if you do not want the cursor to change on hover header.setStyle('cursor', 'pointer'); //you may change the event to 'click' if you want to trigger on single click header.addEvent('[b]dblclick[/b]', function(){slider.toggle();}); }); });[/quote] Available transitions: [spoiler]Fx.Transitions.Sine.easeInOut Fx.Transitions.Sine.easeIn Fx.Transitions.Sine.easeOut Fx.Transitions.linear Fx.Transitions.Quad.easeInOut Fx.Transitions.Quad.easeIn Fx.Transitions.Quad.easeOut Fx.Transitions.Cubic.easeInOut Fx.Transitions.Cubic.easeIn Fx.Transitions.Cubic.easeOut Fx.Transitions.Quart.easeInOut Fx.Transitions.Quart.easeIn Fx.Transitions.Quart.easeOut Fx.Transitions.Quint.easeInOut Fx.Transitions.Quint.easeIn Fx.Transitions.Quint.easeOut Fx.Transitions.Pow.easeInOut Fx.Transitions.Pow.easeIn Fx.Transitions.Pow.easeOut Fx.Transitions.Expo.easeInOut Fx.Transitions.Expo.easeIn Fx.Transitions.Expo.easeOut Fx.Transitions.Circ.easeInOut Fx.Transitions.Circ.easeIn Fx.Transitions.Circ.easeOut Fx.Transitions.Back.easeInOut Fx.Transitions.Back.easeIn Fx.Transitions.Back.easeOut Fx.Transitions.Bounce.easeInOut Fx.Transitions.Bounce.easeIn Fx.Transitions.Bounce.easeOut Fx.Transitions.Elastic.easeInOut Fx.Transitions.Elastic.easeIn Fx.Transitions.Elastic.easeOut[/spoiler]

Last edited by marfillaster (2008-09-01 04:28:29)