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: 
With jQuery:

```
var div = $("#dlyes");  
$("input:radio").click(funciton(){  
    var radioVal = this.value;  
    if(radioVal === "YES"){  
       div.show();  
       div.css({border: "solid 1px red"});  
       setTimeout(function(){div.css({border: "none"});}, 5000);  
    }
    else {
       div.hide();
    }
});

```
**DEMO:** <http://jsfiddle.net/marcuswhybrow/T9f8F/>

There are some problems with your HTML, first you will need to give each of your radio buttons the same `name` attribute. Also you have duplicate `id` attributes for both radios which must be changed or removed. In addition there is not need to capitalise the radio button values:

```
<label><input type="radio" name="myradios" value="yes"> Yes</label>
<label><input type="radio" name="myradios" value="no" checked /> No</label>

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

```

Now the HTML is valid, we can look out for changes in the values of either radio button. It is important to remember that both radio buttons change when you select one, so you must check within the binding to the `change` event that `this.checked` is true to disregard the deselected radio button.

```
var $div = $('#dlyes');
// Hide the div using jQuery rather than CSS, as if JavaScirpt is disabled
// the user should still be able to access the inputs.
$div.hide();

$('input:radio[name="myradios"]').change(function() {
    if (this.checked) {
        if (this.value == 'yes') {
            $div.show()
                .css('background-color', '#FFD700')
                .animate({'background-color': 'transparent'}, 1000);
        } else {
            $div.hide();
        }
    }
});

```

In order to slowly removed the highlight colour of the div, I have used the [jQuery color plugin](http://plugins.jquery.com/project/color) which is necessary for the `animate({backgroundColor: 'transparent'}, 2000)` line.

**DEMO:** <http://jsfiddle.net/marcuswhybrow/T9f8F/>