Last Updated on September 3, 2022 by Roshan Parihar
In this tutorial, learn how to slideup slidedown toggle using jQuery. The short answer is to use the slideDown() and slideDown() to slide up and slide down the content on a button click.
You can also use the slideToggle() function to slide toggle the content when someone clicks on the button element. Let’s find out with the examples with live outputs given below.
Image Slideup Slidedown and Slide Toggle in jQuery
Slide up is the jQuery effect to hide the content and you can use slideUp() function to perform this task. If the content is in a hidden state, you can display it with the jQuery sliding effect using slideDown() of jQuery.
A single function slideToggle() can also be used in place of the above two functions. slideToggle() function can perform both slides up and slide down together with just a single button click.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $('#btn-slidedown').click(function(){ $("#mydiv").slideDown(); }); $('#btn-slideup').click(function(){ $("#mydiv").slideUp(); }); $('#btn-slideToggle').click(function(){ $("#mydiv").slideToggle(); }); }); </script> <div id="mydiv"> <img src="/images/user1.jpg" width="225" height="225"/> </div> <button id="btn-slidedown" type="button">Slide down</button> <button id="btn-slideup" type="button">Slide up</button> <button id="btn-slideToggle" type="button">Slide toggle</button> |
Output
Initially, the image is not in a hidden state. You have to click the second button ‘Slide up image’ to hide the image with a sliding effect. To perform hidden and display sliding effects with just a single button click, you can click the ‘Slide toggle image’ button multiple times.
Text Content Slide Up, Slide Down, and SlideToggle Using jQuery
In addition to the above example, you can also use the above functions to hide the text content on a button click with a sliding effect. See the example given below to get the idea of using the functions slideUp(), slideDown(), and slideToggle().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/style> <script> $(document).ready(function(){ $('#btn-slide-down').click(function(){ $("#mypara").slideDown(); }); $('#btn-slide-up').click(function(){ $("#mypara").slideUp(); }); $('#btn-slide-toggle').click(function(){ $("#mypara").slideToggle(); }); }); </script> <p id="mypara">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button id="btn-slide-down" type="button">Slide down content</button> <button id="btn-slide-up" type="button">Slide up content</button> <button id="btn-slide-toggle" type="button">Slide toggle content</button> |
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The above example contains the text content and the three button. To hide the text content with a sliding effect, you can click the second button ‘Slide up content’. To show the content again, click the ‘Slide down content’ button.
To perform both shows and hide with a sliding effect, you can also click the third button ‘Slide toggle content’ to toggle the text content.
You May Also Like to Read