Monday, June 14, 2010

Toggle display of an html element

Following is a block of code that shall help one toggle display of a html eelement

/**************************************************************************
@Author : Karthikeyan A
@Created: 27-May-2010
@Purpose : To toggle an element's display property
@Type : Function
@Name : toggleDisplay
@Param : elementID, ID of the element whose display property needs to be toggled
**************************************************************************/

function toggleDisplay(elementID) {
var element;
// get the element referenced by the parameter elementID
if (typeof elementID === "string") {
element = document.getElementById(elementID);
} else {
element = elementID
}
// if an element with such an id is not found then through an error
if ((typeof element == 'undefined') || (element == null)) {
throw new Error(
'An element with id "' + elementID + '" is found when executing function toggleDisplay(elementID)');
}
// get the display style of the element
var dispStyle = element.style.display;
// if its none then display the element or hide the same
if (dispStyle == 'none') {
element.style.display = 'block';
// for ie version prior to and including 7
var ie = document.all;
if (ie) {
// for ie5
if (document.layers)
element.visibility = "show";
else
element.style.visibility = "visible";
}
} else {
element.style.display = 'none';
}
}

No comments:

Post a Comment