Question

I have 2 radio button (i.e., <input type=”radio”>) with values “yes”,”no”

Now, I need to show a 2 other fields when someone selects “yes”

I understand that I need to place them in <div>, but when someone selects “yes”, then div should show, with some highlight

I need to achieve these 2 things (that I guess): showing up the div and highlighting it for some time (for user attention).

<input type="radio" id="dl" value="YES" />Yes
<input type="radio" id="dl" value="NO" checked />No

<div id="dlyes"><label>Number</label><input type="text" id="dlno" /></div>

Does anyone know how to achieve this?

Thanks

Answer 1

My solution uses both jQuery and jQueryUI…

Working example: http://jsfiddle.net/Damien_at_SF/gBedF/

Basically I assign a function to the change event of the radio button group. This tests if the radio button is yes or no (based on values).

If yes, we fade in the hidden div and fade out the background color (jQueryUI) after a delay of 500 milliseconds.

If the value of the radio button is no, we reset the background color and hide the div.

HTML: (note I have given both input elements the same ‘name’ attribute so that they are in a group.)

<input type="radio" id="dl" value="YES" name="yesno" />Yes
<input type="radio" id="dl" value="NO" name="yesno" checked />No
<div id="dlyes"><label>Number</label><input type="text" id="dlno" /></div>

CSS:

#dlyes {    
   display:none;
   background-color:#efefef;
   width:400px;
   height:400px;
   margin-top:20px;           
}

Javascript:

$('input[name|="yesno"]').change(function() {
    if($(this).val()=='YES') {
        $('#dlyes').fadeIn(0, function() {
             $(this).delay(500).animate( { backgroundColor: "white" }, 1000);   
        });
    } else {
        $('#dlyes').css('background-color', '#efefef');
        $('#dlyes').fadeOut(0);
    } 
});