Solved

Hide and Show Div Tag Content Based on Radio Button Selection

Posted on 2004-09-27
4
1,819 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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

777 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