Question

Scenario: I have a Question which has 2 radio buttons & two subforms: subformA and subformB

When user checks the 1st radio button subformA should fadeIn elseif he checks 2nd radio button subformB should fadeIn.

Problem: I have done the code but the problem is when User checks the 1st radio button the subformA will appear & if incase he changes his mind and clicks another option instead of previous one. The subformB gets concatenated to subformA.

Request: I want to make those forms mutual Exclusive (no concatenation effect should occur if user rechooses his selection of radio button). Its a small thing that I am unable to notice. Thanks!

my js code::

<!-- script for the Div -->
<script type="text/javascript" >
$(document).ready(function() {
$('#subafform').hide();
 $("#element_4_1").click( function(){
    if( $(this).is(':checked')) {
           $('#subafform').fadeIn();
    } else {
        $('#subafform').fadeOut();
    }
    });
    });

</script>

Other parts of code:

<script type="text/javascript" >
$(document).ready(function() {
$('#subbform').hide();
 $("#element_4_2").click( function(){
    if( $(this).is(':checked')) {
           $('#subbform').fadeIn();
    } else {
        $('#subbform').fadeOut();
    }
    });
    });

</script>




 <li id="li_4" >
  <label class="description" for="element_4">Are you affiliated with Company? </label>
  <span>
   <input id="element_4_1" name="element_4" class="element radio required" type="radio" value="1" />
   <label class="choice" for="element_4_1">Yes</label>
   <input id="element_4_2" name="element_4" class="element radio required" type="radio" value="2" />
   <label class="choice" for="element_4_2">No</label>

  </span> 
  </li> 






<li id="subafform">
  <ul>
  <li id="li_5_1" >
  <label class="description" for="element_5_1">Department/College </label>
  <div>
   <input id="element_5_1" name="element_5_1" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  <li id="li_5_2" >
  <label class="description" for="element_5_2">Department Chair </label>
  <div>
   <input id="element_5_2" name="element_5_2" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  



</li>



<li id="subbform>

........

....

</li>

Answer 1

If someone clicks and already checked radio button, it will just remain checked. So your if else statement isn’t really doing you any good. What I would do is have form B always fadeout when you click A, and form A always fadeout when you click B. Something simple like this:

$("#element_4_1").click(function() {
    $('#subafform').fadeIn();
    $('#subbfform').fadeOut();
}