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.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License