asked on

Click Radio buttons to hide or show divs

I have three radio buttons

Clicking on the 1st one should show first div contents, second one should show the 2nd div contents and third one should show the 3rd div contents.

What's the best way to do this?

_agx_

I'd use jquery. It makes it easy to perform actions on multiple elements just by assigning the same "class" name.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('.buttonDiv').hide();
   $('.buttonClass').change(function(){
      $('.buttonDiv').hide();  // hide all divs
      var buttonNum = this.id.split("_")[1]; // get selected button number 
      $('#buttonDiv_'+ buttonNum).show(); // show selected div
   });
 });
 
</script>
</head>
<body>
        <!--- give the buttons the same "class" name --->
	<input type="radio" id="button_1" class="buttonClass" name="buttonGroup" />Button 1
	<input type="radio" id="button_2" class="buttonClass" name="buttonGroup" />Button 2
	<input type="radio" id="button_3" class="buttonClass" name="buttonGroup" />Button 3 <hr />
        <!--- give all div's the same "class". the "id" should match the button number --->
	<div class="buttonDiv" id="buttonDiv_1">Div 1 content</div> 
	<div class="buttonDiv" id="buttonDiv_2">Div 2 content</div> 
	<div class="buttonDiv" id="buttonDiv_3">Div 3 content</div> 
</body>
</html>

Open in new window

cfsatx

ASKER

Should I use OnClick to trigger the javascript function

<TR>
<TD align="right" nowrap>Alert Type:</TD>
<TD>
<cfinput id="button_1" class="buttonClass" name="buttonGroup" type="radio" value="G">Global  
<cfinput id="button_2" class="buttonClass" name="buttonGroup" type="radio" value="D">Default  
<cfinput id="button_3" class="buttonClass" name="buttonGroup" type="radio" value="C">Custom
</TD>
</TR>

<div class="buttonDiv" id="buttonDiv_1">
<TR>
<TD align="right" nowrap>First:</TD>
<TD>Div 1 content</TD>
</TR>
</div>
<div class="buttonDiv" id="buttonDiv_2">
<TR>
<TD align="right" nowrap>Second:</TD>
<TD>Div 2 content</TD>
</TR>
</div>
<div class="buttonDiv" id="buttonDiv_3">
<TR>
<TD align="right" nowrap>Third:</TD>
<TD>Div 3 content</TD>
</TR>
</div>

_agx_

No the jquery code already handles that. It assigns this custom function to run when the state of any of the radio buttons changes:

$('.buttonClass').change( function(){
$('.buttonDiv').hide(); // hide all divs
var buttonNum = this.id.split("_")[1]; // get selected button number
$('#buttonDiv_'+ buttonNum).show(); // show selected div
});

cfsatx

ASKER

It shows all 3 div contents and doesn't hide the other div 2 and 3 when i click the first radio. Same is the case with other radio buttons

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cfsatx

ASKER

I am using the same names that you have given me for Div, Class, ids etc.,

cfsatx

ASKER

Okay...I did put the enire div within a <td> cell and it does work. Thanks much

<TR>
<TD align="right" nowrap>First:</TD>
<TD><div class="buttonDiv" id="buttonDiv_1">Div 1 content</div></TD>
</TR>

<TR>
<TD align="right" nowrap>Second:</TD>
<TD><div class="buttonDiv" id="buttonDiv_2">Div 2 content</div></TD>
</TR>

<TR>
<TD align="right" nowrap>Third:</TD>
<TD><div class="buttonDiv" id="buttonDiv_3">Div 3 content</div></TD>
</TR>

cfsatx

ASKER

Number of TRs are not the same for each radio selection. what should I do in that case?

_agx_

> I am using the same names that you have given me for Div, Class, ids etc.,

Right, but I'm guessing the invalid div/tr nestings in your code are breaking things. Try my original example, without all the table stuff. It was tested in IE8/FF7.

_agx_

Posts crossed ...

> Number of TRs are not the same for each radio selection. what should I do in that case?
The code's pretty dynamic, so I'm not sure what you mean.

cfsatx

ASKER

It works when I do something like this. But I would like to eliminate the extra TRs. Should I put a condition around the TR. If button_1, then show the 1st TR...etc.,

<TR>
<TD align="right" nowrap></TD>
<TD>
<div class="buttonDiv" id="buttonDiv_1">
Facility Name: Enterprise Wide<br>
Install Name:  Enterprise Wide
</div>
</TD>
</TR>

<TR>
<TD align="right" nowrap></TD>
<TD>
<div class="buttonDiv" id="buttonDiv_2">
Country:       
<cfselect name="countrycode"
bind="cfc:dmis.getCountry()" bindonload="true"
display="Facility_Country_Code"
value="Facility_Country_Code"
required="yes" selected="US" style="width:200" /><br>
State:           
<cfselect name="statecode"
bind="cfc:dmis.getState({countrycode})" bindonload="false"
display="Facility_State_Code"
value="Facility_State_Code" style="width:200" /> <br>
Facility Name:
<cfselect name="facilityname"
bind="cfc:dmis.getFacilityName({countrycode},{statecode})" bindonload="false"
display="Facility_Name"
value="Facility_Name" style="width:300" /><br>
Install Name: 
<cfselect name="installationname"
bind="cfc:dmis.getInstallationName({countrycode},{facilityname})" bindonload="false"
display="Installation_Name"
value="Installation_Name" style="width:300" />
</div>
</TD>
</TR>

cfsatx

ASKER

<TR>
<TD align="right" nowrap></TD>
<TD>
<div class="buttonDiv" id="buttonDiv_3">
Search Term:
<cfinput type="text" name="facname" autosuggest="cfc:dmis.getFacilitiesByName({cfautosuggestvalue})" autosuggestMinLength = "2"
maxresultsdisplayed="500" style="width:300" >
</div>
</TD>
</TR>

_agx_

No, you can't use a cfif without resubmitting the page. But it seems like it'd make more sense to assign the class and "id" to the TR instead (IF you really need both).

ie
<TR class="buttonDiv" id="buttonDiv_1"> ....

I'd recommend changing the prefix from "div..." to "row" too. So it's more intuitive.

cfsatx

ASKER

Perfect...Works like a champ now !! Thanks much !!!