toggle visibility, and disable divs

need a little help!

[PokeTech]

Well first of all here is my code:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'block';
}
//-->
</script>

<style>
.toggle {
display:none;
}
</style>

<form>
<select name="" size=1 onChange="toggle_visibility(value)">
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>

</select>
</form>

<div id="1" class="toggle">Number 1</div>
<div id="2" class="toggle">Number 2</div>
<div id="3" class="toggle">Number 3</div>
<div id="4" class="toggle">Number 4</div>

What I am trying to accomplish here is use the select form and have it toggle the chosen div/id. So far that works, but what I'm stuck on is when selecting another number after you've already selected one I want it to disable the current toggled div.

Any help is appreciated!

[daveVk]

I want it to disable the current toggled div

Then keep track of this div in global var

<script type="text/javascript">
<!--
var curDiv = null;
function toggle_visibility(id) {
if ( curDiv } { curDiv.style.display = 'none'; }
var e = document.getElementById(id);
e.style.display = 'block';
curDiv = e;
}
//-->
</script>

[PokeTech]

Well I figured it out on my own, but thanks!