using jquery in asp.net to hide div tag

Question

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; }

Answer 1

Give this a try...

$('#<%=chkOccup.ClientID %>').click(function(e)
{
    this.checked ? $('#myOccup').show() : $('#myOccup').hide();
}

Answer 2

When you select things with jQuery you need to use CSS Selector syntax, so $('#myOccup') instead of what you have there.

Answer 3

with this: $('[id$=myOccup]') you'll get only the part that really matter to you in the id, even if your control is runat=server;

Answer 4

This is similar to Wallace Breza's answer with some fixes.

 $(function(){

         $('#<%=chk0ccup.ClientID %>').change(function(e)
        {

            this.checked ? $('#myOccup').show() : $('#myOccup').hide();
        });
   });

With this script you should remove everything you have in the <script> tags, your CSS, and the onclick function of the checkbox.

Answer 5

Here is a slide up/down option that should work.

$('#chkOccup').click(function(){
  $('#myOccup').slideToggle();           
});

I also think you were close.. you forgot to enter the # in the selector:

$('myOccup').addClass('display1');

Should be

$('#myOccup').addClass('display1');