Greetings, I have asp.net check box control and asp.net dropdownlist control inside div tag.

I want to hid the div when I check the box and unhide it when I unchecked the box.

I tried few ways with jquery but I could not do it.

Here is my code please look at it and tell me what is wrong with it.

 <%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

  <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">
        function ModifyOccup() {

            $('myOccup').removeClass('display1');
            $('myOccup').removeClass('display1');
            $('myOccup').removeClass('display');
            $('myOccup').removeClass('display');





            if ($('#<%=chkOccup.ClientID %>').is(':checked')) {

                $('myOccup').addClass('display1');
            }
            else {
                $('myOccup').addClass('display');
            }
        }

                </script>


                  <asp:CheckBox ID="chkOccup" runat="server" Style="top: 1055px; left: 355px;
                    position: absolute; height: 22px; width: 126px" Text="Check to modify" onclick=" ModifyOccup()"/>


         <div id ="myOccup" >

                 <asp:DropDownList ID="cmbWorkField" runat="server" Style="top: 1090px; left: 350px;
                    position: absolute; height: 22px; width: 126px">

                </asp:DropDownList>


      </div>
</asp:Content>



......................
Style.css File
..........................


    .display { display: none; }
    .display1 { display: inherit; }