method toggles between the slideDown(>
and slideUp(>
methods. If the weather are slid down, slideToggle(>
can slide them up. If the elements are softened up, slideToggle(>
will slide them down. $(selector>
. slideToggle(speed,callback>
;
jQuery slideUp(>
The jQuery slideUp(>
and slideDown(>
methods
and slideDown(>
methods is employed to hide or show the HTML elements by step by step decreasing or increasing their height (i.e. by sliding them up or down>
.
Example
Try it here
<html>
<head>
<title> jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<style>
</style>
<script type="text/javascript" language="javascript">
$(document>
.ready(function(>
{
// Sliding up displayed paragraphs with different speeds
$(".up-btn">
.click(function(>
{
$("p.normal">
.slideUp(>
;
$("p.fast">
.slideUp("fast">
;
$("p.slow">
.slideUp("slow">
;
$("p.very-fast">
.slideUp(50>
;
$("p.very-slow">
.slideUp(2000>
;
}>
;
// Sliding down hidden paragraphs with different speeds
$(".down-btn">
.click(function(>
{
$("p.normal">
.slideDown(>
;
$("p.fast">
.slideDown("fast">
;
$("p.slow">
.slideDown("slow">
;
$("p.very-fast">
.slideDown(50>
;
$("p.very-slow">
.slideDown(2000>
;
}>
;
}>
;
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<button type="button" class="down-btn">Slide Down Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out with very fast speed.</p>
<p class="normal">This paragraph will fade in/out with default speed.</p>
<p class="fast">This paragraph will fade in/out with fast speed.</p>
<p class="slow">This paragraph will fade in/out with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out with very slow speed.</p>
</body>
</html>