[align=center][b]Fx.Slide - Toggle[/b] [sup]Show/Hide with effects using MooTools - Easy Ways[/sup] [sup]all major browser compatible[/sup] [hr][hr] [/align] [quote][b]Update : [/b] - Added transition (expo). - Move to external javascript file for easy configuration. - Increase duration of effect. - Comment/Delete uneeded Script regarding script conflict issue[/quote] [quote][b]Instruction :[/b] [1] Download this [url=http://jollybear.freeunlimitedweb.com/80s/iSlidesToggle.js]Script[/url] [2] Customize : - Customize/add script to apply effects for addBoxes. - Customize hide boxes at first load. - Un-comment the script if you have Reviews, Blogs, Fan, Groups Boxes. - Delete/give script comment if you dont have media box. (have a mark //media box) [3] Upload to your own file hosting. [4] Insert iSlidesToggle.js to your primary script : [quote]var myScripts = document.createElement('script'); myScripts.type = 'text/javascript' myScripts.src = 'Path/To/iSlideToggle.js' document.getElementsByTagName('head')[0].appendChild(myScripts);[/quote] [5] Demo | Demo Script : [url]http://profiles.friendster.com/mad4moo[/url] [url=http://jollybear.freeunlimitedweb.com/80s/gradient.js]Demo Script[/url][/quote] [b]More :[/b] [spoiler] [1] Duration (ms): - Lower than 1000 = faster / Higher than 1000 = slow [2] Transitions : - default transition is [b]Fx.Transitions.Expo.easeInOut[/b] - for more transition example see [url=http://demos111.mootools.net/Fx.Transitions]here[/url] [3] addBox - for example, addBox ID is [b]lorem[/b] so we use this script : [quote]addBox("RIGHT","addBox title",code,"[b]lorem[/b]",null); we will get [b]lorem[/b] for class & [b]content_lorem[/b] for ID[/quote] - now apply effects for addBox : [quote]var iSlideBox = new Fx.Slide(iCons.getElement('[b]#content_lorem[/b]'), { duration: 1000, transition: Fx.Transitions.Expo.easeInOut }); iCons.getElement( '[b].lorem h2[/b]' ).addEvent( 'click', function(){ iSlideBox.toggle(); } );[/quote] [4] Hide Box at first load : - hide testmonial & comment : [b]iSlide6.hide();[/b] - hide lorem addBox : [b]iSlideBox.hide();[/b] (addBox at previous illustration) [/spoiler] [b]good luck [/b] [i]script issue, question & suggestion reply here, thanks.[/i]

Last edited by gumscumbag (2008-08-13 13:19:03)