How to use  toggle() Method Event in JQuery

This article describe about  jQuery Event toggle() Method.
  • 4055

 toggle() Method Event in jQuery

Two or more event handler functions bind by the toggle() method to toggle between for the click event for selected elements.

The toggle between hide() and show() for the selected elements this method can also be used.


<!DOCTYPE html>



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

<script type="text/javascript">

    $(document).ready(function () {

        $("p").toggle(function () {

            $("body").css("background-color", "Blue");


    function () {

        $("body").css("background-color", "Gray");


    function () {

        $("body").css("background-color", "Red");







<p>Click on this paragraph to toggle between different background colors</p>




toggle method pic2.jpg

Note: After click on the above output paragraph background changed.

Bind Two or More Functions to a Toggle Event

When specific element is clicked then toggle between two or more method.



Toggle Between Hide() and Show()

When any element is hidden then run show() method to visible. And if element is visible then hide() method run for invisible.




Parameter Description
Speed Optional. It define the speed of hide/show effect.

Possible values:

  • milliseconds (like 1200)
  • "slow"
  • "normal"
  • "fast"
callback Optional. function to execute after the toggle method complete.

Show and Hide Element

Define weather the ONLY show or ONLY hide all matched elements.



You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here


More Articles

© 2020 DotNetHeaven. All rights reserved.