Hide/reveal script

[The Praetorian]

I was just wondering if anyone could help me edit this script. I'd like to use this hide/reveal script so that when someone clicks a checkbox or radio button (whichever I decide to use) it reveals whatever was hiding. And it disappears again if they unclick it. I've tried this before with a different hide/reveal script I'm using on my website, but it didn't work. I'd also need to know what switch to use in the select tag. (IE... onclick/onselect/onchange... ) Thanks in advance for any help.Here's the script.

function hideshow(which){if (!document.getElementById)returnif (which.style.display=="block")which.style.display="none"elsewhich.style.display="block"}

[Chocolate570]

I was just wondering if anyone could help me edit this script. I'd like to use this hide/reveal script so that when someone clicks a checkbox or radio button (whichever I decide to use) it reveals whatever was hiding. And it disappears again if they unclick it. I've tried this before with a different hide/reveal script I'm using on my website, but it didn't work. I'd also need to know what switch to use in the select tag. (IE... onclick/onselect/onchange... ) Thanks in advance for any help.Here's the script.

function hideshow(which){if (!document.getElementById)returnif (which.style.display=="block")which.style.display="none"elsewhich.style.display="block"}

Don't worry--your script works perfectly. You only have a couple of problems with how you're calling it.First of all, in the element whose visibility you want to toggle, add this:style="display:block;" (or display:none;)And also, in the element you're using to toggle, you have to call the hideshow function like this:onclick="hideshow(document.getElementById('your element id here'))"And it'll work perfectly. =)

[The Praetorian]

Okay. Minor problem. Not too big a deal if I can't fix it, but I just thought I'd ask.It works fine and everything, but when the hidden object appears it appears on a new line, even though I'm not using a line break. Is there any way to get it to appear on the same line?Here's the html. The javascript is the same as above.

<p><b>* Nationality</b><br />Ikarri : <input type="checkbox" name="Nation" value="Ikarri" onclick="hideshow(document.getElementById('Kiil'))" /> <input type="checkbox" name="Race" value="Kiil" id="Kiil" /></p>

[The Praetorian]

Ignore the post above. I figured that one out. I do have another question though regarding this script.I'm using radio button inputs, and I'd like to edit this script so that when someone changes their selection from one radio button to another, the previous one's hidden content closes. (I guess make it so that only one can be open at a time, if that's possible. Either that or just make it so that the previous one closes.)If it's not possible or it would be too complicated, that's fine. Just thought I'd ask. Here's the script again.

function hideshow(which){if (!document.getElementById)returnif (which.style.display=="inline")which.style.display="none"elsewhich.style.display="inline"}

[jesh]

So you only want one radio button's sub content to be visible at a time? The way I generally get around this is to put the sub content in containers that have the same class:

<div id="SomeID" class="SubContent"><!-- Content goes here --></div>

Then, in the hideshow function, I would get all div elements and loop through them. Any div that had a className of "SubContent" I would hide. Something like this:

function hideshow(which){	if (!document.getElementById)		return;	var divs = document.getElementsByTagName("div");	for(var i = 0; i < divs.length; i++)	{		if(divs[i].className == "SubContent")			divs[i].style.display = "none";	}	if (which.style.display != "block")		which.style.display = "block";}

[The Praetorian]

Either I didn't do that right, or it doesn't work with what I have set up. Lemme show you what I did.Javascript

function hideshow(which){	if (!document.getElementById)		return;	var divs = document.getElementsByTagName("div");	for(var i = 0; i < divs.length; i++)	{		if(divs[i].className == "SubContent")			divs[i].style.display = "none";	}	if (which.style.display != "inline")		which.style.display = "inline";}

html

<p><b>* Nationality</b> ( + Requires you to choose a Race/Sub-species )<br /><input type="radio" name="Nation" value="Ihthian" onclick="hideshow(document.getElementById('raceone'))" /> : Ihthian +<span id="raceone" class="hide"> |  Pahth : <input type="radio" name="Race" value="Pahth" />  Roehn : <input type="radio" name="Race" value="Roehn" />  Theyhn : <input type="radio" name="Race" value="Theyhn" />  Ohnen : <input type="radio" name="Race" value="Ohnen" /></span><br /><input type="radio" name="Nation" value="Siyk" /> : Siyk<br /><input type="radio" name="Nation" value="Shani" /> : Shani<br /><input type="radio" name="Nation" value="Ush'ii" /> : Ush'ii<br /><input type="radio" name="Nation" value="Ikarri" onclick="hideshow(document.getElementById('racetwo'))" /> : Ikarri +<span id="racetwo" class="hide"> |  Kiil : <input type="radio" name="Race" value="Kiil" />  Iken : <input type="radio" name="Race" value="Iken" /></span><br /></p>

[jesh]

<span id="raceone" class="hide">...</span>

Since you named your class "hide" rather than "SubContent", and since you are using a span rather than a div to hold that content, you'll need to make a few changes to that script.First, you'll need to getElementsByTagName("span") rather than getElementsByTagName("div"), and second, you'll want to look for the spans that have a className of "hide" rather than "SubContent". Here's the updated script:

function hideshow(which){	if (!document.getElementById)		return;	var spans = document.getElementsByTagName("span");	for(var i = 0; i < spans.length; i++)	{		if(spans[i].className == "hide")			spans[i].style.display = "none";	}	if (which.style.display != "inline")		which.style.display = "inline";}

[The Praetorian]

Okay. That one works.And now I realize I may need something a little more complicated. heh. As you can see, I have several other radio buttons on the same level as the ones with sub-options. How complicated would it be to make it so that if any other radio buttons on the same level are selected, the hidden content disappears again?(IE.. if someone chooses 1 [which opens the sub-choices] and then changes their mind and chooses 2 [with no sub-choices] the sub choices for 1 would close even though nothing else is opening.)Is that possible?Again, if that would be too much of a hassle, let me know and I'll be satisfied with what I have.Thanks guys.

[jesh]

Without actually building it myself, I'm guessing it wouldn't be too complicated. I would suggest moving the part of the script that hides all open sub menus into its own function:

function hideSubMenus(){	var spans = document.getElementsByTagName("span");	for(var i = 0; i < spans.length; i++)	{		if(spans[i].className == "hide")			spans[i].style.display = "none";	}}function hideshow(which){	// call the hideSubMenus() function to hide all the 	// open menus:	hideSubMenus();	if (!document.getElementById)		return;	if (which.style.display != "inline")		which.style.display = "inline";}

Then, you could have hideSubMenus() be the event listener for the click event of the radio buttons in the sub menu:

<input type="radio" onclick="hideSubMenus();" />

You might have to tweak it here and there to get it to work exactly how you wanted, but it should put you in the right direction.EDIT: Hmm, I seemed to have read your post too quickly. The above still sort of applies, however. Separate out the code into those two functions. Then, on radio buttons that have sub menus, use the hideshow() function. On radio buttons that don't have sub menus, use the hideSubMenus() button. Hope this helps!