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!

A commonly asked question is whether it is possible to use Element.show() and Element.hide() without inline styles.

Although the Prototype documentation states it isn't, with a little bit 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 a 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 set the display attribute
                 .setStyle({display: ''}); // as well, 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 the previously defined class name hiddenByCss to hide elements with CSS and keep your HTML clean of inline styles.