|
Hints
SlideUp() used to hide element with sliding effect towards up direction.SlideDown() used to show element with sliding effect towards down direction.
Example: 1 Explain about slideUp() and slideDown() function.
slideToggle() is combination of slideUp() and slideDown() functions.
Example: 2 Explain about slideToggle() function.
|
Example: 1 Explain about slideUp() and slideDown() function <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").slideDown();
});
$(".three").click(function () {
$(".two").slideUp();
});
});
</script>
<style type="text/css">
.two {
display: none;
}
</style>
</head>
<body>
<div class="one">Click here to slide down the following element</div>
<div class="two">Slide Up/Slide Down</div>
<div class="three">Click here to slide up the following element</div>
</body>
</html> |
|
Example: 1 Demo
|
Example: 2 Explain about slideToggle() function <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").slideToggle();
});
});
</script>
<style type="text/css">
.two {
display: none;
}
</style>
</head>
<body>
<div class="one">Click here to slide up and slide down the following element</div>
<div class="two">Slide Up/Slide Down</div>
</body>
</html> |
|
Example: 2 Demo
|
