We help IT Professionals succeed at work.

Click Radio buttons to hide or show divs

cfsatx
cfsatx asked
on
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?
Comment
Watch Question

Most Valuable Expert 2015

Commented:
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

Author

Commented:
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&nbsp;&nbsp;
<cfinput id="button_2" class="buttonClass" name="buttonGroup" type="radio" value="D">Default&nbsp;&nbsp;
<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>  
Most Valuable Expert 2015

Commented:
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
   });
 

Author

Commented:
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
Most Valuable Expert 2015
Commented:
> <div class="buttonDiv" id="buttonDiv_1">
> <TR>

IIRC you can't nest div tags and table rows that way.  Either the entire <table> should be within the <div> or the entire <div> should be within a <td> cell.

Author

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

Author

Commented:
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>

Author

Commented:
Number of TRs are not the same for each radio selection. what should I do in that case?
Most Valuable Expert 2015

Commented:
> 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.  
Most Valuable Expert 2015

Commented:
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.

Author

Commented:
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:&nbsp; Enterprise Wide
</div>
</TD>
</TR>

<TR>
<TD align="right" nowrap></TD>
<TD>
<div class="buttonDiv" id="buttonDiv_2">
Country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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:&nbsp;
<cfselect name="installationname"
      bind="cfc:dmis.getInstallationName({countrycode},{facilityname})" bindonload="false"
      display="Installation_Name"
      value="Installation_Name" style="width:300" />
</div>      
</TD>
</TR>

Author

Commented:
<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>
Most Valuable Expert 2015

Commented:
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.

Author

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