Follow in Twitter & Facebook


Like in Facebook

Powered By Blogger Widgets

Free Download

FREE Tools


Saturday, August 25, 2012

Show hide div using jQuery in asp.net

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 other article on jQuery on how to disable right click by using jQuery.

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>




0 on: "Show hide div using jQuery in asp.net"