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 toggle() Effect

Last Updated: April 21, 2019 by Chaitanya Singh | Filed Under: jQuery

In this guide, we will discuss the jQuery toggle effect. It is used to toggle between hidden and displayed html elements. Which means it hides the shown element and when clicked again it shows the hidden element.

Syntax

selector.toggle( speed, [callback]);

Here selector is any jQuery selector that is used to select an html element on which this toggle effect is applied.

speed: This parameter is optional and can be provided in milliseconds or the values such as “slow” or “fast”.

[callback]: This is also an optional parameter, it represents a function that executes when the toggle animation is complete.

jQuery toggle() Effect Example

In the following example we have applied the toggle effect on the paragraphs on the button click event. When the button is clicked first time, it hides all the paragraphs present on the html page and when clicked again, it shows them again.

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

<h2>jQuery toggle effect example</h2>
<p>This tutorial is published on beginnersbook.com. This para
can be hidden and displayed using toggle button.</p>
<button>toggle</button>
</body>
</html>

Output:
Page loaded, we have not clicked the toggle button yet:
jQuery toggle
After toggle button is clicked:
jQuery toggle method
After toggle button is clicked again:
jQuery toggle example

jQuery toggle effect with speed parameter

We can pass speed in milliseconds for the toggle effects. In the following example paragraph element will take 2000 milliseconds time to get hidden and displayed completely. Alternatively we can pass the values such as “slow” and “fast” in instead of milliseconds value.

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(2000);
  });
});

jQuery toggle effect with callback parameter

Lets take the same example that we have seen above, we are just changing the jQuery part in the script area of the example: Here we have passed the speed parameter as “fast” which means the toggle effect will be fast and in the callback function we are displaying an alert message that “All paragraphs are now hidden”.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("fast", function(){
      alert("All paragraphs are now hidden");
    });
  });
});

This will produce the following output when we click the toggle button:
jQuery toggle with speed and callback

Top Related Articles:

  1. jQuery html() method
  2. jQuery removeClass() Method
  3. jQuery fadeIn() Effect
  4. jQuery Effects – Show and Hide
  5. jQuery fadeOut() Effect

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

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 – 2025 BeginnersBook . Privacy Policy . Sitemap