Hide and Show Div Tag Content Based on Radio Button Selection

I want to have something like the following radio button list on a webpage:

O  Option 1
     This is a description of option 1
O  Option 2
     This is a description of option 2
O  Option 3
     This is a description of option 3
O  Option 4
     This is a description of option 4

Whenever an option is selected I would like for it to expand downward, pushing everything else down. Inside the expansion would be a DIV containing a html table with form elements. Clicking a different option would then close the previous one and expand the newly selected one. If this were to work, would it be possible for me to be able to get the values of the form elements that are contained within the DIV tags?

Also, I would like this to be able to work in Netscape or IE.

Thank you.
greddinAsked:
Who is Participating?
 
ZylochConnect With a Mentor Commented:
Hi greddin,

Something like this?

In the head section, have this:
<script language="javascript">
<!--

var dArray=new Array("div1","div2","div3","div4");

function showThis(nme) {
   for (var i=0;i<dArray.length;i++) {
      document.getElementById(dArray[i]).style.display='none';
   }
   document.getElementById(nme).style.display='';
}

//-->
</script>

Then you'd have:

<input type="radio" value="div1" onclick="showThis(this.value);"> Option 1
<div id="div1" style="display:none;">This is a description of option1</div>
<input type="radio" value="div2" onclick="showThis(this.value);"> Option 2
<div id="div2" style="display:none;">This is a description of option2</div>
<input type="radio" value="div3" onclick="showThis(this.value);"> Option 3
<div id="div3" style="display:none;">This is a description of option3</div>
<input type="radio" value="div4" onclick="showThis(this.value);"> Option 4
<div id="div4" style="display:none;">This is a description of option4</div>

Regards,
Zyloch
0
 
cLFlaVACommented:
Slightly varied - no parameters...

<html>
<head>

<style type="text/css">

div {
    display: none;
    }

</style>

<script language="javascript">
<!--
function a() {
    var rads = document.forms['the_form'].elements['the_rad'];
    for (var i = 1; i <= rads.length; i++) {
        if (rads[i-1].checked)
            document.getElementById('opt_desc' + i.toString()).style.display = 'block';
        else
            document.getElementById('opt_desc' + i.toString()).style.display = 'none';
    }
}
-->
</script>
</head>
<body>
<form name="the_form">
<input type="radio" name="the_rad" onclick="a();">Option 1<br>
<div id="opt_desc1">This is the description for option 1</div>
<input type="radio" name="the_rad" onclick="a();">Option 2<br>
<div id="opt_desc2">This is the description for option 2</div>
<input type="radio" name="the_rad" onclick="a();">Option 3<br>
<div id="opt_desc3">This is the description for option 3</div>
<input type="radio" name="the_rad" onclick="a();">Option 4<br>
<div id="opt_desc4">This is the description for option 4</div>
</form>
</body>
</html>

Also, what do you mean by "would it be possible for me to be able to get the values of the form elements that are contained within the DIV tags?"

I believe form fields are submitted as long as they are between the <form></form> tags.
0
 
COBOLdinosaurCommented:
Perhaps something like this:

<html>
<head>
   <title> x-browser text from select </title>
<script type="text/javascript">
   ACTIVElist=false;
   function show(thediv)
   {
      if (ACTIVElist)
               ACTIVElist.style.display="none";
      ACTIVElist = document.getElementById(thediv);
      ACTIVElist.style.display="block";
    }
</script>
</head>

<body>

<div id="DATES" style=position:absolute;left:40;top:100">
<form>
   <input type="radio" name"rad1" value="one" onclick="show(this.value)">option 1<br />
   <div id="one" style="display:none">
       <input type="text"> text 1a<br />
       <input type="text"> text 1b<br />
       <input type="text"> text 1c<br />
       <input type="text"> text 1d<br />
       <input type="text"> text 1e<br />
   </div>
   <input type="radio" name"rad1" value="two" onclick="show(this.value)">option 2<br />
   <div id="two" style="display:none">
       <input type="text"> text 2a<br />
       <input type="text"> text 2b<br />
       <input type="text"> text 2c<br />
       <input type="text"> text 2d<br />
       <input type="text"> text 2e<br />
   </div>
   <input type="radio" name"rad1" value="three" onclick="show(this.value)">option 3<br />
   <div id="three" style="display:none">
       <input type="text"> text 3a<br />
       <input type="text"> text 3b<br />
       <input type="text"> text 3c<br />
       <input type="text"> text 3d<br />
       <input type="text"> text 3e<br />
   </div>
   <input type="radio" name"rad1" value="four" onclick="show(this.value)">option 4<br />
   <div id="four" style="display:none">
       <input type="text"> text 4a<br />
       <input type="text"> text 4b<br />
       <input type="text"> text 4c<br />
       <input type="text"> text 4d<br />
       <input type="text"> text 4e<br />
   </div>
</form>
</body>
</html>


Cd&
0
 
sreekanth_k77Commented:
Try below sample code :


<HTML>
<HEAD>
<TITLE>Test Checkbox and Radio button </TITLE>
<SCRIPT LANGUAGE="javascript">
 function showHide(sStatus)
 {
       if (sStatus == 1)               
             dTest.style.display = ""
       else
             dTest.style.display = "none"
       
 }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "frmTest">
   <INPUT TYPE = "radio" NAME = "optShow" onClick = "showHide(1)" >  Show Div area  <br>
   <INPUT TYPE = "radio" NAME = "optShow" onClick = "showHide(2)" >  Hide Div area  <br>
</FORM>
<DIV id = "dTest"> <b> This is the area to test.</b></DIV>
</BODY>
</HTML>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.