Home » JavaScript » jQuery » jQuery slideToggle / slideUp / slideDown Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

jQuery slideToggle / slideUp / slideDown Example

In this example, we’ll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle.

For your basic understanding, know that slideUp hides the matched elements with a sliding motion, slideDown displays the matched elements with a sliding motion, while slideToggle will toggle between the two states, meaning it will display or hide the matched elements with a sliding motion.

The methods are mainly used for animations and do not affect the actual page layout, which means that you may use them regardless of how elements are arranged on a webpage.

It is also used for other show/hide functionality like displaying an error message when an input is incorrect.

1. Document Setup

To begin, create a new HTML document and add the following basic syntax inside:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery SlideUp/Down/Toggle Example</title>
</head>
<body>

<!-- HTML SECTION  -->


<!-- JAVASCRIPT SECTION  -->
<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

</script>

</body>
</html>

Note that the jQuery Library is linked locally. If you don’t have it, please download here.

2. Specifications & Examples

For each of the methods, we’re giving some more information and each example will consist of a button and a paragraph which will be hidden or shown or toggled depending on the case.

2.1 slideUp Method

The syntax for this method is: $(selector).slideUp(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.

To apply the method, first add the following elements in HTML:

<!-- HTML SECTION  -->
<p>Lorem ipsum dolor sit amet!</p>
<button>Hide (Slide Up)</button>

Now in jQuery, just after the button click, we select the p element and hide it (slide it up).

<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function(){
        $('p').slideUp();
    });
});
</script>

This is how the paragraph slides up in the browser:
slideup1

2.2 slideDown Method

The syntax for this method is: $(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.

To apply the method, first add the following elements in HTML:

<!-- HTML SECTION  -->
<p style="display:none;">Lorem ipsum dolor sit amet!</p>
<button>Show (Slide Up)</button>

Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;
Now in jQuery, just after the button click, we select the p element and hide it (slide it up).

<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function(){
        $('p').slideDown();
    });
});
</script>

This is how the paragraph slides down in the browser:
slidedown1

2.3 slideToggle Method

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.

The syntax for this method is: $(selector).slideToggle(speed,callback);

The optional speed parameter can take the following values: “slow”, “fast”, milliseconds. The optional callback parameter is a function to be executed after the sliding completes.

To apply the method, first add the following elements in HTML:

<!-- HTML SECTION  -->
<p>Lorem ipsum dolor sit amet!</p>
<button>Toggle Slide State</button>

Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;
Now in jQuery, just after the button click, we select the p element and hide it (slide it up).

<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function(){
        $('p').slideToggle();
    });
});
</script>

This is how the paragraph toggles between the two states of slide in the browser:
slidetoggle1

3. Extending Basic Functionality

Let’s now use the speed parameter and a callback function just to give you an idea of how you can use these. Add the following two elements in HTML:

<!-- HTML SECTION  -->
<p>Lorem ipsum dolor sit amet!</p>
<button>Click Me</button>

In the JS section, let’s give the sliding a duration of 1000ms and a function which will just alert a message of our choice.

<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function(){
        $('p').slideUp(1000, function(){
            alert("Slide Up Completed!")
        });
    });
});
</script>

The same goes for either slideDown or slideToggle, so we’re just going to demonstrate one of the methods:
slidedown2

4. Conclusion

To conclude, jQuery provides three methods for hiding and showing content using a smooth and soft animation. In a way, it is a substitution for the manual hiding and showing content via the hide() and show() methods (even though not exactly) which just had the functionality with no animation at all.

To get more information on these methods, do refer the the official jQuery website and get familiar with the options if you intend to use it in a more professional manner.

5. Download

Download
You can download the full source code of this example here: jQuery SlideToggle

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments