hide/unhide div, only 1 allowed open at a time

Hi, I'm currently using some javascript to hide and unhide div's.

I've been messing around and searching about trying to find something which will only allow one of the hidden div's open at a time. When a new link is clicked, the last div open closes. Unfortuanatly I haven't found anything yet, so I am wondering if anyone on this board can help please?

The script I am using is:

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>

<style type="text/css">
.hidden {
display: none;
}

.unhidden {
display: block;
}
</style>

and the mark-up:


<p><a href="javascript:unhide('test1');">Testing 1</a></p>

<div id="test1" class="hidden">
<p>Testing :)</p>
</div>

<p><a href="javascript:unhide('test2');">Testing 2</a></p>

<div id="test2" class="hidden">
<p>Testing again :)</p>
</div>


I hope I have been clear, appreciate any help given.

<script type="text/javascript">
function unhide(divID) {
var divs=document.getElementById('wrap').getElementsByTagName('div');
for(var i=0;i<divs.length;i++)
divs[i].className='hidden';

var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<div id="wrap">
<p><a href="#" onclick="unhide('test1'); return false;">Testing 1</a></p>

<div id="test1" class="hidden">
<p>Testing :)</p>
</div>

<p><a href="#" onclick="unhide('test2'); return false;">Testing 2</a></p>

<div id="test2" class="hidden">
<p>Testing again :)</p>
</div>
</div>

Thanks abduraooft, I think I might be relying on you too much though. :thumbsup:

This code works like a charm :)
But a question, what do i have to change to make the text hide again when "re clicked"?

thanks in advance!

how stupid of me, had to add </div> after the
"<p><a href="#" onclick="unhide('test1'); return false;">Testing 1</a></p>"

tnx :)