Subscribe
Please visit my new Web Site WWW.Codedisplay.com
The man who starts to learn Jquery, basically this post is for you. As a developer i knew that in most web applications we need to do the same job many times. Previously i have explained how one can display/show hide a div using Javascript. For Javascript version please click here. But recent days we were very familiar with Jquery & love to write Jquery method instead of Javascript. In this article i will basically show you how you can display show hide Div content using jquery. To do that first add an aspx page in your project. Then write the link to your jquery libraray. Now add a text link (named Show/Hide Div) in your page. Also add a div tag on your page. Our purpose is when user click on Show/Hide Div link then if the corresponding DIV which you want to display or hide is hidden then the jquery script will display the DIV otherwise hide. Please have a look of my example code snapshot:
If you are looking for javascript code to toggle the DIV CLICK HERE.
The Jquery script is given below:
<script type="text/javascript">
$(document).ready(function(){
$('#DIV1').hide();
$('a#lnkShowHide').click(function(){
$('#DIV1').toggle('slow');
return false; /** not necessary if you add "#" into Achor href.**/
});
});
</script>
The complete HTML markup code is given below:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_hide_Div_Jquery.aspx.cs" Inherits="Show_hide_Div_Jquery" %>
<!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>How to display hide DIV tag using Jquery</title>
<script src="Script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#DIV1').hide();
$('a#lnkShowHide').click(function(){
$('#DIV1').toggle('slow');
return false; /** not necessary if you add "#" into Achor href.**/
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a id="lnkShowHide" href="" name="lnkShowHide">Show/Hide Div</a>
<div id="DIV1">
<p>Some div content here<br/>Some div content here</p>
</div>
</div>
</form>
</body>
</html>
Hope now you can toggle div using Jquery smoothly.Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome
0 comments:
I WOULD BE DELIGHTED TO HEAR FROM YOU