Tip - Using Element.show() And Element.hide() With Css

Needs Cleanup

This article needs cleanup to meet our writing standards:

• Grammar

Can you help? Click edit below!

It is common question if it is possible to use Element.show() and Element.hide() without inline styles.

Although the Prototype documentation states it isn't, with a little of self-discipline it is possible to replace those methods and use one specific css class name for this purpose. Let's call it hiddenByCss.

.hiddenByCss {
        display: none;
    }

You should not use this class for any other purpose, and you must not place display: none clause in any other css class.

Next, replace the original show() and hide methods with:

Element.addMethods({
    show : function(element) {
        element = $(element);
        element.removeClassName('hiddenByCss') //should be enough to show Element, but 
               .setStyle({display: ''}); //in case the element was hidden with inline script
    },
    hide : function(element) {
        element = $(element);
        element.addClassName('hiddenByCss'); //hide element with css                
    }
});

Now you can use previously defined class name to hide elements with css and keep your html clean of inline styles.