Friday, July 27, 2007

show / hide using javascript

<html>
<head>

<script language="javascript">
var ids = new Array('one','two');

function hideElement(id)
{
if(document.getElementById)
{
document.getElementById(id).style.display='none';
}
}

function showElement(id)
{
if(document.getElementById)
{
document.getElementById(id).style.display='block';
}
}

function hideAll()
{
for(var i=0;i<ids.length;i++)
{
if(document.getElementById)
{
hideElement(ids[i]);
}
}
}

function switchId(id)
{
hideAll();
showElement(id);
}

</script>

</head>

<body>


<div id='one' style="display:block">
SHOWING <BR>
<a href="javascript:switchId('two');">show another</a>
</div>

<div id='two' style="display:none">
SHOWING NEXT ... <BR><a href="javascript:switchId('one');">cancel</a>
</div>

</body>
</html>

No comments: