Share on Google+Share on Google+

jQuery 'slideToggle' & 'slideUp' function

Ads
In this tutorial, we will discuss about 'slideToggle' &' slideUp' function of jQuery.

jQuery 'slideToggle' & 'slideUp' function

In this tutorial, we will discuss about 'slideToggle' &' slideUp' function of jQuery. In the below example, when you click on given button, a window opens .And if you again click on this button, it hides window. This window also contain a '[x]' button. When you click on it, it hides the window also. This window displays because the button click fires 'slideToggle' event, which slide up the window.

slideToggle.html

<!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=iso-8859-1" />
<title>JQuery Collapse</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function()
{

$("#click_here").click(function(event) {
event.preventDefault();
$("#div1").slideToggle();
});

$("#div1 a").click(function(event) {
event.preventDefault();
$("#div1").slideUp();
});
});
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666
}
a{color:#993300; text-decoration:none;}
#div1 {
width:30%;
display: none;
padding:5px;
border:2px solid #EFEFEF;
background-color:#7FFFD4;
}
#click_here{
padding:5px;
border:2px solid #FFEFEF;
background-color:#FF6347;
}
</style>
</head>
<body>
<input type="button" id="click_here" value="Click Here">
<div id="div1">
<a href="#" class="close">[x]</a>
<p>
This window displays because the button click
<br>fires slideToggle event,which slide up the window.
<br>CLICK ON [X] TO SLIDE UP/CLOSE THE WINDOW.
</p>
</div>
</body>
</html>

OUTPUT

When we click on 'button', it displays :

If you again click button or [x] , it will displays :

Download Source Code

Click here to see demo

Advertisements

Posted on: July 30, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

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.

Advertisement