asp:RadioButtonList and jQuery to show hide a panel

Question

I have an asp:RadioButtonList named rblDependants which renders as follows and a panel pnlDependants and I need to hide it when radio button selection is "No" and show it when its "Yes". I have tried a few snippets from the forums and none seem to work fine. Can anyone help me pls....!

  <table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants"  border="0" style="border-width:0px;">
        <tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td>
        </tr><tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td>
        </tr>
</table>

<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants">

                    <div class="QuestionWrapper">

                        <div class="Question">
                            <label for="">No. of Dependants</label>
                        </div>
                        <div class="Answer">
                            <input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" />
                        </div>
                        <div class="ClearFloat"></div>
                    </div>

Answer 1

Something like this should work:

​$("table[id$=_rblDependants] :radio").change(function() {
    $(this).closest('table').next().toggle(this.checked && this.value == 'Yes');
})​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.change()​;​

This would work for any number of repeated controls since it finds the <div id="X_pnlDependants"> relatively. All we're doing it taking an <table> who's ID ends-with _rblDependants, taking any :radio buttons inside it and binding to their .change() event. Then either of them is changed it's checking that the result was value="Yes" and it was .checked, if that's the case show the panel, otherwise hide it, via .toggle(bool).

The .closest() and .next() are to go up to the <table> then to the next element, the <div>, since that's what you want to hide/show. The .change() on the end is to trigger the handler initially, so if "No" is initially checked, it hides the <div> on load.

You can give it a try here