In this article I will show you how you can show hide div
control using jquery toggle function in your asp.net application.
Some of my previous articles are as follows: Restrict
Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC,
Display
No of Characters Entered In TextArea Using jQuery, Drag
Drop Cells in GridView Control Using Asp.net C# and jQuery, GridView
With Fixed Headers in Asp.Net Using C# and jQuery.
So for this article first we will create a new asp.net application
and add a new page . In your page add the below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Showhidediv.aspx.cs" Inherits="ProjectDemo_Asp.et.Showhidediv"
%>
<!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 runat="server">
<title>Show and
Hide Div on Button Click in Asp.Net</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript">
function
ShowHideDivOnButtonClick() {
$('#divcontrol').toggle("slow");
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divcontrol" style="background-color: Green; border: 2 solid red;width:300px;height:100px;color:White;font-size:30px;">
Show and Hide Div on Button Click in
Asp.Net
</div>
<br />
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="javascript:return ShowHideDivOnButtonClick();"
/>
</form>
</body>
</html>
|
Below mention jQuery function is used for doing toggle effect.
<script language="javascript">
function
ShowHideDivOnButtonClick() {
$('#divcontrol').toggle("slow");
return
false;
}
</script>
|
Now view the page in browser
About the Author
Bakwas band kar
ReplyDeleteThank you this was very useful
ReplyDeleteThanks for your valuable feedback
Delete