//Roberto Mazzucchelli

Toggle-o-matic lets you add multiple toggle and slide elements to a page simply by matching a class suffix

demo

Check out a live demo of the toggle-o-matic v0.2 here.

features

• create a slide effect with no coding or configuration
• automatically adds cursor to toggle control
• use a single control to toggle many elements or one

installation

1. Download mootools 1.2;
2. Download mootools 1.2 “more” library (which includes the FX.slide);
3. Upload the toggle-o-matic code between script tags (
   

   ), before () or save the javascript write in this page as toggleomatic.js and link it to your homepage’s code.

configuration

For makes work this script just follow this next instruction:

• Javascript
var toggleOmatic = function() {
 var toggleAll = $(document.body).getElements(‘[class$=_toggle]‘);
 toggleAll.each(function(item){
 item.setStyle(‘cursor’, ‘pointer’);
 var toggleAllClass = item.getProperty(‘class’);
 toggleAllClass = toggleAllClass.replace("_toggle", "");
 var slideAllClass = toggleAllClass + "_slide";
 var slideAll = $(document.body).getElements(‘.’ + slideAllClass);
 slideAll.slide(‘hide’);
 $(item).addEvent(‘click’, function(){
 slideAll.slide();
 });
 });
 }
window.addEvent(‘domready’, function() {
 toggleOmatic();
 });
• Html
<a class="this_toggle" href="#">Toggle</a>
<div class="this_slide">Toggle this element</div>
<a class="abunch_toggle" href="#">Toggle</a>
<div class="abunch_slide">Toggle many elements</div>
<div class="abunch_slide">Toggle multiple elements</div>
<div class="abunch_slide">Multiple element toggle

regards

This work was made by consideropen.org

Post simili:

• Phatfusion: javascript and flash development. (0)
• Reaper 1×10 Il Bottino - download da rapidshare e megaupload - in italiano (0)
• Download Accelerator Plus 8.6 (0)
• WordPress 2.3 o superiori e Ultimate Tag Warrior: come gestire i TAG (2)
• Windows XP Service Pack 3: disponibile per il download anche in Italiano (0)