Sanjeev Shrestha

I see few of my colleagues struggling through long codes, just to implement simple show and  hide. Yes this can be done with simple javascript code, but the implementation is repetitive and cumbersome. Show and hide is used in almost every web site here and there. So this post should be helpful to those people who really want a simple solution to this simple yet tedious problem!

Mootools is a gem of javascript libraries. And implementing a simple show hide is even more simpler with mootools. This code snippet can be used anywhere within a webpage to implement a simple Show Hide. Here is the code

window.addEvent(‘domready’,function(){

Element.extend(     //Implement the following functions in every element existent in the webpage
        {
            show:function(e){
          
            this.setStyle(‘display’,'block’);
          
            },
            hide:function(e){  
            this.setStyle(‘display’,'none’);
          
            }
        }
        );

});

This mootools snippet implements the custom method show and hide in every element of the webpage. This means we can use the simple $(‘element’).hide(); and $(‘element’).show(); to show and hide the element.  (A piece of cake, isn’t it?)

The above code snippet should be written in the script section yes you know it!!

The remaining html implementation is as below

<span onclick=”$(’stage’).hide();”>Hide</span>

<span onclick=”$(’stage’).show();”>show</span>

<div id=”stage”>

This is the text to be hidden or shown

This is the text to be hidden or shown

This is the text to be hidden or shown

This is the text to be hidden or shown

</div>

The html section shows the general usage of the show hide method we just implemented in every element. This code is handy! just copy and use it in your pages. Yes, you can copy!

I will soon maintain a demo site to see all the codes in action.
Till then happy reading