Here are some JavaScript Functions for Showing or Hiding block(s) of HTML elements on any javascript event like: onClick, onMouseOver, onBlur etc etc...
These functions can be used to make good effects on the HTML pages.
These functions are Browser compatible, To use, you just need to pass the ID(s) of the elements(s) you want to show/hide with some event on client side.
Alter Display: It checks the current display status of the element with the ID passes, and alters that. If element is displaying on screen, it will be hide and vice-versa.
//input -> ID of the HTML element (DIV, SPAN, TABLE, TR etc)
function alterDisplay(id)
{
if(document.getElementById(id))
{
e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = "";
else
e.style.display = "none";
}
}
hideIDs(): This function hides all the IDs passed in one go.
It accepts the multiple IDs in comma separated form.
Note: Input is one string only, there is no space between comma (,) & ID
//input -> comma separated IDs of the HTML element (DIV, SPAN, TABLE, TR etc)
//e.g. 1 -> hideIDs('div1,div2,tr1'); //Multiple IDs
//e.g. 2 -> hideIDs('div1'); //Single ID
function hideIDs(IDs)
{
var IDs = IDs.split(',');
for(i=0;i < IDs.length;i++)
{
e = document.getElementById(IDs[i]);
e.style.display = "none";
}
}
showHiddenIDs(): This function shows (un-hide) all the IDs passed in one go. It accepts the multiple IDs in comma separated form.
Note: Input is one string only, there is no space between comma (,) & ID
//input -> comma separated IDs of the HTML element (DIV, SPAN, TABLE, TR etc)
//e.g. 1 -> showHiddenIDs('div1,div2,tr1'); //Multiple IDs
//e.g. 2 -> showHiddenIDs('div1'); //Single ID
function showHiddenIDs(IDs)
{
var IDs = IDs.split(',');
for(i=0;i < IDs.length;i++)
{
e = document.getElementById(IDs[i]);
e.style.display = "";
}
}