Show/Hide Divs on Checkbox check in jQuery

This small example shows how you can show/hide content contained in a DIV dependent on the 'checked' property of an asp CheckBox control.

jQuery

<script type="text/javascript">
       $(document).ready(function () {
 
           var chkControl = document.getElementById('<%= chkBox.ClientID %>');
           //Hide div as default
           $("#pnlContent").css("display", "none");
 
           // Handles checkbox 'click' event
           $(chkControl).click(function () {
               if ($(chkControl).is(":checked")) {
                   $("#pnlContent").show("slow");
               }
               else {
                   $("#pnlContent").hide("slow");
               }
           });
       });
 </script>

asp.net

<asp:CheckBox ID="chkBox" runat="server" Text="Check Me" />
  
  <div id="pnlContent">
      <p>Content appears as if by magic!</p>
  </div>


I've found this really useful for building forms where certain fields need to be shown or hidden if a criteria hasn't been met. This is also achievable from the server side where we could create a control that would contain the content, but it would require a postback to the server. This solution is very simple, lightweight and the jQuery animation gives makes it that much more professional looking, rather than forcing the user into a screen refresh and playing spot the difference when something had been added or removed. 


Ive added some basic CSS to make the content easier to see for this example


#pnlContent 
{
    background-color:Gray;
    width:400px;
    height:200px;
    padding: 10px 10px 10px 10px; 
    text-align:center;
}
 
#pnlContent p 
{
  color:White;
  font-size:xx-large;
}