BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery slideToggle()

By Chaitanya Singh | Filed Under: jQuery

jQuery slideToggle() method toggles between slideUp() and slideDown() methods. If the html elements are slid down then this method will slide them up and if the elements are slid up then this method will slide them down.

jQuery slideToggle() Syntax

$(selector).slideToggle(speed, callback_function);

Here $(selector) is to select html elements.

speed is an optional parameter and it can be passed in milliseconds or “slow” or “fast”.

callback_function is an optional parameter as well. This function executes when the effect is complete. In this case, it will execute when the slide toggle effect is complete. We will see the example of it in this article as well.

jQuery slideToggle() Example

In the following example we are applying the slide toggle effect on the paragraph, on the h2 element click event, we are calling slideToggle() method on paragraph, which will make the paragraph disappear with a slide up effect and when we click the h2 heading again, the paragraph will reappear with a slide down effect.

The slideToggle effect happens only when we click the h2 heading because we are calling slideToggle() method inside h2 element click function.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideToggle();
  });
});
</script>
</head>
<body>

<h2>jQuery slideToggle effect example, Click here</h2>
<p id = "para">This tutorial is published on beginnersbook.com. This
paragraph will disappear with a slide up effect once we click on the
h2 heading and when we click on the h2 heading again, this para will
reappear with a slide down effect.</p>
</body>
</html>

Output:
Before h2 heading is clicked:
jQuery slideToggle
After h2 heading is clicked:
jQuery slideToggle method
After h2 heading is clicked again:
jQuery slideToggle example

jQuery slideToggle() Example with speed and callback function parameters

We can also pass speed and callback function as parameters to the slideToggle() method. Speed parameter is to adjust the speed of the effect and callback function executes when the effect is complete. Here we are setting up an alert message in the callback function which will execute when the slide toggle effect is complete.

$(document).ready(function(){
  $("h2").click(function(){
    $("#para").slideToggle("slow", function(){
      alert("The slideToggle effect is complete");
    });
  });
});

Output:
jQuery slideToggle effect with speed callback parameters

❮ PreviousNext ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap