Solved

Hide and Show Div Tag Content Based on Radio Button Selection

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

772 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

12 Experts available now in Live!

Get 1:1 Help Now