显示基于复选框控件的隐藏ASP面板不起作用

Question

I am trying to show/hide asp panel based on checkbox checked in checkbox control.

HTML code

    <asp:Panel runat="server" ID ="ESYLaterControl" CssClass="ESYLaterControl">
  <tr>
     <td style="padding-top: 10px;padding-left: 0px">
     <asp:CheckBox runat="server" ID="chkbxesylater" CssClass="chbxESYLater"  OnCheckedChanged="PageModified"/>
    <uc3:DateControl ID="Dtctrlesylaterdate" class="dtctrESY" runat="server"/>
    </td>
</tr>
 <tr>
<td id="explainESYLater" style="padding-top: 10px">
    &nbsp;Explain
    </td>
</tr>
<tr>
<td style="padding-left: 3px">
     <asp:TextBox runat="server" ID="txtesylater" Class ="txtbxESY" Width="100%" TextMode="MultiLine"></asp:TextBox>
    </td>
</tr>
</asp:Panel>

Script

<script type="text/javascript">
$(document).ready(function () {
    $(function() {

        var $ESYYes = $('#<%= YesNoControlESY.GetYesClientID() %>');
        var $ESYno = $('#<%= YesNoControlESY.GetNoClientID() %>');
        var $panel = $('.ESYLaterControl');

        $ESYYes.change(function () {
            if ($panel != null && $ESYYes != null)
                 if($ESYYes.is(':checked')) {
                    panel.style.display = 'block';
                } else {
                    panel.style.display = 'none';
                }
        });
       });

});

When I debug the code in firebug its going inside if block if($ESYYes.is(':checked')) but its not showing or hiding panel.

Answer 1

Instead of

panel.style.display = 'block' and panel.style.display = 'none';

try

$panel.show(); and $panel.hide();

Answer 2

$panel is missing the $ prefix. Your variable inside of the if/else blocks is "panel".