Some of these functions are very useful in most classes I wrote. It helps in keeping a CMS interface neat and coherant for example when making some widgets appear with fadein effects or whatever.
Element.implement({ toggle: function() { // Show/hide if (this.getStyle('display') == 'none') this.open(); else this.close(); }, open: function() { // Show and fade in this.setStyles({'display': 'block', 'opacity': 0}); this.set({'tween': { duration: 200, onComplete: (function(){this.setStyle('display', 'block');}).bind(this) }}); this.fade(1); }, close: function() { // Hide and fade in this.set({'tween': { duration: 200, onComplete: (function(){this.setStyle('display', 'none');}).bind(this) }}); this.fade(0); }, popup: function(parent) { // Popup an element relatively to "parent" fn = function(e) { var e = new Event(e); var el = e.target; while (el != document.body && el.nodeType == 1) { if (el == this || el == parent) { return false; } else { el = el.parentNode; } } this.close(); this.inject(parent, 'after'); } document.removeEvent('mousedown', fn.bind(this)); if(this.getStyle('display') == 'none'){ this.inject(document.body); this.open(); if(parent){ this.setStyles({ 'width': parent.getWidth() , 'top': parent.getPosition().y + parent.getHeight(), 'left': parent.getPosition().x, 'z-index': 10000 }); } } document.addEvent('mousedown', fn.bind(this)); }, appendHTML: function(HTML){ // append HTML to an element. // ex : $('el').appendHTML('<div>toto</div>') // => <div id="el">tata<div>toto</div></div> return this.innerHTML = this.innerHTML + HTML; } });