Solved

Hide and Show Div Tag Content Based on Radio Button Selection

Posted on 2004-09-27
4
1,817 Views
Last Modified: 2010-05-18
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.
0
Comment
Question by:greddin
4 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 12164532
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12164645
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12164753
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
 

Expert Comment

by:sreekanth_k77
ID: 12346107
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now