Quick Reach
The slideToggle method of jQuery
The slideToggle() method is used to toggle between the slideDown() and slideUp() methods. If an element is slid down, the jQuery slideToggle method will slide it up and vice versa.
See example of slideToggle
Syntax of jQuery slideToggle method
Following is the syntax of slideToggle method:
$(selector).slideToggle (speed,callback);
Where:
- selector = An element to toggle, that can be a paragraph, div etc.
- Speed = The speed in milliseconds, “fast” or “slow”.
- Callback = An optional argument, which is a function, that will be executed after sliding completes in either direction (upwards or downwards)
For example:
$(“#slider”).slideToggle(“slow”);
Example of slideToggle() method
Following example shows how to use the jQuery slideToggle method. A paragraph of text is already shown as example page loads. As you click on the link to toggle, the paragraph will slide up and upon clicking it again it will slideDown by using the slideToggle method.
See demo online by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
.demomenu {
background-color: #6898d0;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #e5eecc;
color: 000000;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#link1”).click(function () {
$(“.exclass”).slideToggle(“1000”);
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” href=“#”>Click here to Toggle between Slide Up and Slide Down</a>
</div>
<p class=“exclass”>This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example!
This is sliding text example! This is sliding text example! This is sliding text example!
This is sliding text example!</p>
</body>
</html>
|
Leave A Comment?