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.
page revision: 4, last edited: 18 Oct 2013 00:15