Show hide div using jQuery in asp.net


In this article, we will discuss how we can show or hide a div using jQuery in our asp.net application.
You can also check my previous posts on:
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>
Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →