Question

I have webform with several standard fields, however 1 field I want to be either shrunk or greyed out or hidden until the field above it…a Radio button selection box with Yes or No options, is selected Yes…or even a check box would work…does not matter

<tr>
 <td style="width: 143px"><b>Add Notes:
 </b></td>
<td><input type="radio" name="cmtad" value=Yes>Yes
    <input type="radio" name="cmtad" value=No>No
</td>
</tr>

<tr>
 <td style="width: 143px" class="style10"><b>Notes:
 </b></td>
<td >
<textarea input name=info rows="5" cols="32"  style="color: black;background-color:#FFFF66"></textarea></td>
</tr>

I want the Notes text area to appear only if Yes is clicked in the Radio button above it the Add Notes.
thanks

Answer 1

You can do this with javascript or jquery.

Below is an example with jquery.

$(document).ready(function() {
   $('input[name="cmtad"][value="Yes"]').click(function() {
      $(this).parent().parent().next().show();
   }
   $('input[name="cmtad"][value="No"]').click(function() {
      $(this).parent().parent().next().hide();
   }
});

The above code should hide the tr immediately following the tr in which the radio buttons are contained. The parent() calls allow jquery to bubble up the DOM to select the next tr. This is a sample code, edit as required.

PS,
Would a checkbox not be a better option for this?