I have this script that works nicely, using a <span> i'm able to display or hide the content in it (box form) when a radio button is checked or unchecked.


function Show_Stuff(Click_Menu) {
// Function that will swap the display/no display for
// all content within span tags

if (Click_Menu.style.display == "none") {
Click_Menu.style.display = "";
}
else {
Click_Menu.style.display = "none";
}
}


but i need it to work like Dell's online ordering page, where other radio button with the same input name is checked, the previous will be hidden again. as such, there should only be one display box/content at one time, for the same input name.

i'm a noob and don't know how to edit, but i made an attempt like this.

function Hide_Stuff(Click_Menu) {
// Function that will swap the display/no display for
// all content within span tags
var length;
length = document.form1.radiobutton.length;
for (i=0 ; i < length ; i++ )
if (document.form1.radiobutton[i].checked) {

}
else {
Click_Menu.style.display = "none";
}

}

hide();
function hide() {
setInterval("Hide_Stuff(display1)",500);
setInterval("Hide_Stuff(display2)",500);
setInterval("Hide_Stuff(display3)",500);
}


but it seems to ignore whatever i've clicked, and close all the boxes when the "500" is up.

any help here?

Forgive me if I misunderstood, but as I see it you are trying to have one block of text showing depending on which option is selected.

When I do things like that, I use div's for the text blocks, and the following:

<script language="javascript">
var currentidx;
currentidx=1;

function showhide(idx)
{
this.document.all['divname'+currentidx].style.display="none";
this.document.all['divname'+idx].style.display="block";
currentidx=idx;
}
</script>

<input type=radio name='radiolist' onclick='showhide(1)'>
<input type=radio name='radiolist' onclick='showhide(2)'>
<input type=radio name='radiolist' onclick='showhide(3)'>
<div name='divname1' style='display:none'>
text 1
</div>
<div name='divname2' style='display:none'>
text 2
</div>
<div name='divname3' style='display:none'>
text 3
</div>

you can, of course, have php generate these lists...looping through incremental numbers used in all the names makes it easier. or, of course, you can code it by hand.

thanks alot!

but another question is..
if i've clicked on the first one, and the first div box has appeared, and then i clicked on the second one thereafter. will the first one disappear, keeping only the first one?

i need that to happen, it's somewhat like a Dell's ordering page.

last but not least, i'm also trying to find some javascript to do the auto-updating of pricing at the bottom of the page, when a selection is made. just in case you happen to know.

thanks alot dude!

here is the code i posted in action, yes, it does make the first vanish:
http://www.zeropride.com/test/radios.html

and for pricing, easiest thing seems to be making a function called recalc() that checks the variable 'currentidx' to see whats selected and then output it. just make that onClick line say "onClick='showhide(1);recalc();'>"