JavaScript bring element to front

[pleek]

ok so i got this code off a website because my original code (from the book im learning from) was to complex for the little bit i needed it to do.

 

Heres the code

 

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = z++;
}
</script>

 

ok i have two <div>s and i want it so that when u click on a button the div assinged to the button is brought forward. Im not to familier with the getElementbyId part of things so can somebody help me out?

 

a sample script for one of the buttons would help to.

 

Thanks in advance....

[phpQuestioner]

try this:

 

<script type="text/javascript">
var z = 10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = z++;
}
</script>

<a href="javascript:void(0)" onclick="ShowHide('content1')">Top</a> <a href="javascript:void(0)" onclick="ShowHide('content2')">Bottom</a>

<br><br>

<div style="width:500px;height:300px;border:solid 1px black;overflow:auto">
<div id="content1" style="position:absolute;z-index:2;background:white;width:500px;height:300px;display:block">
<table><td>
<!-- Add Content Here -->
Content For Box 1 Here
</td></table>
</div>

<div id="content2" style="position:absolute;z-index:1;background:white;width:500px;height:300px;display:block">
<table><td>
<!-- Add Content Here -->
Here Is The Content of Your Second Box
</td></table>
</div>
</div>

[emehrkay]

z++ is post-increment. I may only increase after the assignment (i always mix the order of operation up with this). try ++z