Scribd
Upload
57 views

Jquery Slidedown Example

The document discusses three jQuery sliding effects - slideUp(), slideDown(), and slideToggle(). slideUp() hides an element by sliding it up, slideDown() shows a hidden element by sliding it down, and slideToggle() toggles between these states by detecting visibility and applying the appropriate effect. Examples are provided to demonstrate how to use each method, including optional parameters like duration, callbacks, and easing functions.

Uploaded by

Laxmi Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

Jquery Slidedown Example

The document discusses three jQuery sliding effects - slideUp(), slideDown(), and slideToggle(). slideUp() hides an element by sliding it up, slideDown() shows a hidden element by sliding it down, and slideToggle() toggles between these states by detecting visibility and applying the appropriate effect. Examples are provided to demonstrate how to use each method, including optional parameters like duration, callbacks, and easing functions.

Uploaded by

Laxmi Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

jQuery API provides three useful sliding effect methods

– slideUp(), slideDown() and slideToggle(). We can use these methods to show and hide an
HTML DOM element with sliding effect.
1. slideDown(): jQuery slideDown() method is used to show the hidden HTML element where it
looks like the content is getting shown by sliding down.
2. slideUp(): jQuery slideUp() method is used to hide the HTML element where it looks like the
content is getting hidden by sliding up.
3. slideToggle(): jQuery slideToggle() method is used to toggle the HTML element with sliding
hide and show effects. If the element is hidden, then it will show the element
like slideDown() method. For visible elements, it will work as slideUp() method.
Let’s look at all these methods with example programs.

jQuery slideDown() Example


The slideDown() method is used for the downward sliding transition of the selected html
elements. The height attribute of the selected element is animated which makes the lower
parts of the elements to reveal with a sliding effect. The parameters passed in the
slideDown() method determines the behavior of this effect.

Here is the general syntaxes for using slideDown() method.

 slideDown(duration);

 slideDown(duration, callBackfunction);

 slideDown(speed, easing, callBackfunction);

 slideDown(options);

duration: The values of the duration are specified in milliseconds. We can also give string
values like “slow” and “fast”. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for
transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideDown() Example
The following example demonstrates the slideDown() method. In this example, slideDown()
method takes two parameters; duration with value “slow” and a call back function. When
you run this demo, you can see the call back function fires after the sliding effect.

jQuery-slideDown.html
1
2
3
4 <!DOCTYPE html>
5 <html>
6 <head>
<title>jQuery Slide Down</title>
7 <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
8 <script>
9 $(document).ready(function(){
10 $("#btn1").click(function(){
$(".divClass").slideDown("slow",function ()
11 {
12 $("#textMsg").text("Slide Down completed.");
13 });
14 });
15 });
</script>
16
17 <style>
18 .divClass
19 {
20 padding:5px;
21 text-align:center;
background-color:green;
22 border:solid 1px;
23 }
24 .divClass
25 {
padding:50px;
26 display:none;
27 }
28 </style>
29 </head>
30 <body>
31
<button id="btn1">Click Me to slide down</button>
32 <div class="divClass"><b>JournalDev</b> <br><br>jQuery SlideDown</div>
33 <div id="textMsg"></div>
34
35 </body>
36 </html>
37
38
39
You might have met with the slide down effects in many web pages. This is how we
accomplish the slide down effect in jQuery. The parameters passed to this method is similar
to the jQuery hide() and show() method.

jQuery slideUp()
The slideUp() method is used for the upward sliding transition of the selected html
elements. The height attribute of the selected element is animated which makes the lower
parts of the elements to conceal with a sliding effect. The parameters passed in the
slideUp() method determines the behavior of this effect.

Here is the general syntaxes for using slideUp() method.

 slideUp (duration);

 slideUp (duration,callBackfunction);

 slideUp (speed,easing,callbackMethod);

 slideUp (options);

duration: The values of the duration are specified in milliseconds. We can also give string
values like “slow” and “fast“. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for
transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideUp() Example
The following example demonstrates the slideUp() method. In this example, slideUp()
method takes two parameters; duration with value “slow” and a call back function. When
you run this demo, you can see the call back function fires after the sliding effect.

jQuery-slideUp.html
1 <!DOCTYPE html>
2 <html>
<head>
3 <title>jQuery Slide Up</title>
4 <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
5 <script>
6 $(document).ready(function(){
7 $("#btn1").click(function(){
$(".divClass").slideUp("slow",function()
8 {
9 $("#textMsg").text("Slide Up completed.");
10 });
11 });
12
13
14
});
15 </script>
16
17 <style>
18 .divClass
19 {
20 margin-top:20px;
padding:10px;
21 text-align:center;
22 background-color:green;
23 border:solid 1px;
24 height:200px;
25 width: 300px;
}
26 </style>
27 </head>
28 <body>
29
30 <button id="btn1">Click Me to slide up</button>
<div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideUp</div>
31 <div id="textMsg"></div>
32
33 </body>
34 </html>
35
36
37
38
39
40
This is how we accomplish the sliding up effect in jQuery. The parameters passed to this
method is similar to the jQuery hide() and show() method. This will be a handy method while
designing web pages.

jQuery slideToggle()
The slideToggle() method is used to hide or display the selected html elements. The height
attribute of the selected element is animated which makes the lower parts of the elements
to reveal or conceal with a sliding transition. The slideToggle() method checks the visibility
of the selected element first. If the element is visible then it will trigger the slideUp() method
else it triggers slideDown() method.
Here is the general syntaxes for using slideToggle () method.

 slideToggle (duration);

 slideToggle (duration,callBackfunction);

 slideToggle (speed,easing,callbackMethod);

 slideToggle (options);

duration: The values of the duration are specified in milliseconds. We can also give string
values like “slow” and “fast”. Default duration is 400 milliseconds.
callBackfunction: This function is fired after the completion of sliding transition.
easing: This parameter determines which easing function like “swing” or “linear” is used for
transition. “swing” is the default value.
options: This could be anything like duration, callBackfunction, easing, special easing etc.
jQuery slideToggle() Example
The following example demonstrates the slideToggle() method. In this example,
slideToggle() method takes two parameters; duration with value “slow” and a call back
function. When you run this demo, you can see the call back function triggers after the
sliding effect.

jQuery-slideToggle.html
<!DOCTYPE html>
1 <html>
2 <head>
3 <title>jQuery Slide Toggle</title>
4 <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
5 <script>
$(document).ready(function(){
6 $("#btn1").click(function(){
7 $(".divClass").slideToggle("slow",function()
8 {
9 alert("Slide Toggle Method completed.");
});
10
});
11
12
13
14 });
15 </script>
16
17 <style>
.divClass
18 {
19 margin-top:20px;
20 padding:10px;
21 text-align:center;
background-color:green;
22 border:solid 1px;
23 height:200px;
24 width: 300px;
25 }
26 </style>
</head>
27 <body>
28
29 <button id="btn1">Click Me to slide Toggle</button>
30 <div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideToggle</div>
31 <div id="textMsg"></div>
32
33 </body>
</html>
34
35
36
37
38
39
40
This is how we toggle between hide and display of the html elements with a sliding
transition. The parameters passed in the slideToggle() method is similar to slideUp() and
slideDown() methods.

jQuery slideDown, slideUp and slideToggle Demo


You can use below links to see jQuery slide up, slide down and slide toggle effects in
action.

1. jQuery slideDown() Demo


2. jQuery slideUp() Demo
3. jQuery slideToggle() Demo
That’s all for jQuery sliding effects for showing and hiding DOM elements, we will be looking
into more jQuery effects in future posts.
jQuery toggleClass example
By mkyong | May 24, 2010 | Updated : August 30, 2012 | Viewed : 50,821 times

The toggleClass() method means if matched elements do not have the class name,
then add it; if matched elements already have the class name, then remove it.

Let see an example, a simple ‘p’ tag.

Markup

<p>This is paragraph</p>

Call $(‘p’).toggleClass(‘highlight’), it will add a highlight class to the ‘p’ tag.

Markup

<p class="highlight">This is paragraph</p>

Call $(‘p’).toggleClass(‘highlight’) again, it will remove the highlight class from the ‘p’
tag.

Markup

<p>This is paragraph</p>

The toggleClass() is equivalent to the following jQuery codes as well.

Markup

if ($('p').is('.highlight')) {

$('p').removeClass('highlight');

else{

$('p').addClass('highlight');

}
jQuery toggleClass example
Markup

<html>

<head>

<style type="text/css">

.highlight {

background:blue;

</style>

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

</head>

<body>

<h1>jQuery toggleClass example</h1>

<p>This is paragraph1</p>

<p id="para2">This is paragraph2 (toggleClass effect)</p>

<p>This is paragraph3</p>

<p id="para4">This is paragraph4 (add/remove effect)</p>

<button id="toggleClass">toggle class</button>

<button id="addremoveClass">Add/Remove class</button>

<script type="text/javascript">
$("#toggleClass").click(function () {

$('#para2').toggleClass('highlight');

});

$("#addremoveClass").click(function () {

if ($('#para4').is('.highlight')) {

$('#para4').removeClass('highlight');

else{

$('#para4').addClass('highlight');

});

</script>

</body>
</html>

You might also like