How to Hide Div Using JQuery When Asp.Net Button Click


In these Tutorials we see how to perform JQuery on Asp.net Button Click Div Tag Hide. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : How to Validate two Textbox values (Password and Confirm Password Comparion) by Using JQuery and another article is How to Validate Textbox Data doesn't allow empty value by using JQuery.

Method : 1

HTML Markup : Create Button and Div in ASP.NET Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryExample1.aspx.cs" Inherits="JQUERY_TUTORIALS_JQueryExample1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
    <script>
       Add JQUERY CODE HERE        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Hide" />    
    <div id="divhide" style="background:#000000; width:350px; height:350px;">
    </div>
    </form>
</body>
</html>

JQuery : Button Click

<script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function () {
                $('#divhide').hide();
                return false;
            });
        });
    </script>

Just simply copy and paste the JQuery : Button Click code in ASP.NET PAGE and run.

Method : 2

In these method 2 you have to do add display:none; in div tag as shown below


    <div id="divhide" style="background:#000000; width:350px; height:350px; display:none; ">

JQuery Code :

<script type="text/javascript">
        $(document).ready(function () {
    
            $('#divhide').show();
            $('#Button1').click(function () {
                $('#divhide').hide();
                return false;
            });
        });             
    </script>

JQuery Code :

<script type="text/javascript">
        $(document).ready(function () {
            $('#divhide').show(1000);
            $('#Button1').click(function () {
                $('#divhide').hide(1000);
                return false;
            });
        });
    </script>
0 Komentar untuk "How to Hide Div Using JQuery When Asp.Net Button Click"

Back To Top