Home Ajax Jquery jQuery To Hide the Div
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

jQuery To Hide the Div

Advertisement
In this JQuery tutorial we will develop a program that Hide of a Div

jQuery To Hide the Div

     

In this JQuery tutorial we will develop a program that Hide of a Div

Steps to develop the Hide of a Div .

Step 1:

 

 

 

Create a new file (divdisappear.html) and add the following code into it:

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div Disappear</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".divClass .deleteDiv").click(function(){
$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 470px;
}
h3 {
margin: 0;
padding: 0 0 .5em;
}
p {
margin: 0;
padding: 0 0 .3em;
}
.divClass {
background: #efefef;
padding: 20px 20px 20px;
position: relative;
border-top: solid 2px #000000;
}
.divClass .deleteDiv {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>
</head>

<body>
<div class="divClass">
<h3>Div 1</h3>
<p>Content 1.</p>
<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>
<div class="divClass">
<h3>Div 2</h3>
<p>Content 2.</p>

<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>
<div class="divClass">
<h3>Div 3</h3>
<p>Content 3.</p>
<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>

</body>

</html>


Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery.js"></script>

The Code

$(".divClass .deleteDiv").click(function(){

 This function works when generate the click event on the div

and having correponding style css.

divClass .deleteDiv {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}

and another function having two parameter opacity is visuality and "slow" working on class "divClass"

$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");

 After Click On the Delete 

Output :

 

Check online demo of the application

 

 

Learn from experts! Attend jQuery Training classes.

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 8, 2008

Ask Questions?    Discuss: jQuery To Hide the Div   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com