...

View Full Version : hide/unhide div, only 1 allowed open at a time



nick1988
03-13-2009, 05:22 PM
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.

abduraooft
03-13-2009, 05:30 PM
<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>

nick1988
03-13-2009, 05:38 PM
Thanks abduraooft, I think I might be relying on you too much though. :thumbsup:

Jumparound
08-05-2009, 09:57 AM
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!

Jumparound
08-05-2009, 10:34 AM
how stupid of me, had to add </div> after the
"<p><a href="#" onclick="unhide('test1'); return false;">Testing 1</a></p>"

tnx :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum