Question

I want to hide a div on a page load using jquery js. And then on a click of a button i want to show that div. i am not able to do even trying it so hard..
above shown below are My jquery function and
The Div that i want to kept hidden on page load and shown on a button click event.

<div id="newDiv">
            <fieldset class="fieldset">
                <legend>Add Salary Allounce Type:</legend>
                <table cellpadding="0" cellspacing="0" align="center" class="table">
                    <tr>
                        <td>
                            <asp:Label ID="LabelAllounceType" runat="server" Text="Allounce Type:"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="LabelAllounceType1" runat="server" Text="Allounce Type:"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
<asp:Button ID="ButtonAddNew" runat="server" Text="Add New Type" OnClientClick="" />`
        </div>
<script>
     $(document).ready(function () {
                $('#ButtonAddNew').click(function () {
                    $('#newDiv').hide();
                });

            }); 
</script>

Answer 1

well, your code says that when you click the button, the div should be hidden. You probably want something more like:

$(document).ready( function () {
  $('#newDiv').hide(); // make sure the div is hidden on page load.  You could also
                       // accomplish this by making it have a style of display: none

  $('#buttonAddNew').click( function () { 
    // when the button is clicked, show the div.
    $('#newDiv').show(); 
  });
});