In this article we will discuss about how we can show or hide a div using jQuery in our asp.net application.
You can also check my previous posts on:
- Data files and Log files in sql server 2008
- Delegates in C#.Net
- How to Generate a Strong Name for the Assembly and How to Build the Assembly and Add it to the Global Assembly Cache?
First we have to give reference to the jQuery library like below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then we need to write the function. Below is the full .aspx code.
.aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowHideDiv.aspx.cs" Inherits="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">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<title>Show hide div using jQuery</title>
<script type="text/javascript">
$(document).ready(function (){
$(".mydiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".mydiv").slideToggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div><a href="#" class="show_hide">Show/hide</a>
<div class="mydiv">This div will behave like show or hide !!!</div>
</div>
</form>
</body>
</html>
You can also check my previous posts on:
- Data files and Log files in sql server 2008
- Delegates in C#.Net
- How to Generate a Strong Name for the Assembly and How to Build the Assembly and Add it to the Global Assembly Cache?
First we have to give reference to the jQuery library like below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then we need to write the function. Below is the full .aspx code.
.aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowHideDiv.aspx.cs" Inherits="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">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<title>Show hide div using jQuery</title>
<script type="text/javascript">
$(document).ready(function (){
$(".mydiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".mydiv").slideToggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div><a href="#" class="show_hide">Show/hide</a>
<div class="mydiv">This div will behave like show or hide !!!</div>
</div>
</form>
</body>
</html>
