Forum Moderators: open
I have one doubt, pls guide me to solve it. My question is , In one HTML page I have 4 links for example
Link1
Link2
Link3
Link4
Ok. If I press Link One some contenct with images should display below to the links. If I press Link2, Link1's content should disappear and Link2 content should appear in the same place. How to do it. Pls help me
Vivek
Google for "dhtml central", click on the first result and you 'll get a lot of them.
Something like this should work for you:
<html>
<head>
<script type="text/javascript">
<!--
function HideAll(){ //hides all of the content blocks
showHideElement('contentBlock1',0);
showHideElement('contentBlock2',0);
showHideElement('contentBlock3',0);
showHideElement('contentBlock4',0);
}
function showHideElement(szDivID, iState) //shows or hides an element by id (1 = show 0 = hide)
{
if(document.layers)
{
document.layers[szDivID].display = iState? "block" : "none";
}
else if(document.getElementById)
{
var obj = document.getElementById(szDivID);
obj.style.display = iState? "block" : "none";
}
else if(document.all)
{
document.all[szDivID].style.display = iState? "block" : "none";
}
}
-->
</script>
</head>
<body onload="HideAll();">
<a href="#" onclick="HideAll(); showHideElement('contentBlock1',1);">Link1</a>
<a href="#" onclick="HideAll(); showHideElement('contentBlock2',1);">Link2</a>
<a href="#" onclick="HideAll(); showHideElement('contentBlock3',1);">Link3</a>
<a href="#" onclick="HideAll(); showHideElement('contentBlock4',1);">Link4</a>
<div id="contentBlock1">
This is content block 1
</div>
<div id="contentBlock2">
This is content block 2
</div>
<div id="contentBlock3">
This is content block 3
</div>
<div id="contentBlock4">
This is content block 4
</div>
</body>
</html>
There's probably a better way to do this, but I whipped this one up in ten minutes and it seems to work in IE and Firefox.
