Implementing Basic and Fancy Show/Hide in MooTools 1.2

One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class implement method. Using the implement method, you can add your own methods to custom or core classes.

Basic Example – MooTools JavaScript

//when the dom is ready...
  window.addEvent('domready', function() {
   //time to implement basic show / hide
   Element.implement({
    //implement show
    show: function() {
     this.setStyle('display','');
    },
    //implement hide
    hide: function() {
     this.setStyle('display','none');
    }
   });
   

Basic Example – XHTML / Usage

<p>
 <b>Basic: </b><a href="javascript:$('blove').show();">Show</a> | <a href="javascript:$('blove').hide();">Hide</a><br>
 <img id="blove" src="toys.jpg">
</p>

Fancy Example – MooTools JavaScript

//time to implement basic fancy show / hide
   Element.implement({
    //implement fancy show
    fancyShow: function() {
     this.fade('in');
    },
    //implement fancy hide
    fancyHide: function() {
     this.fade('out');
    }
   });
   
  });

Fancy Example – XHTML / Usage

<p>
 <b>Fancy: </b><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br>
 <img id="blove2" src="toys.jpg">
</p>

Step 5: The MooTools 1.2

Click Here to DOWNLOAD

Example

Click to DEMO