**Toggle** in jQuery simply refers to a built-in method that can be applied to any element on a page; it is used to *hide* or *show* that particular element. The button that is used to `toggle` moves over the text to hide it. 

Once clicked again, the button goes back to its original position and reveals the text. 

# Syntax

The `toggle method` has the syntax as shown below:

$(selector).toggle(speed,easing,callback);

## Parameters

* **`speed`:** This can either be given in milliseconds or in the textual input as *"slow"* or *"fast"*. The speed determines the rate at which the `toggle` will hide or show the text.

* **`easing`:** This has two possible input values,*"swing"* or *"linear"*, with the former being the default value. This value determines whether the entire `toggle` will run at the same pace (i.e. linearly) or if it will increase speed in the middle (i.e. swinging).

* **`callback`:** This is simply a method that can be called to execute once the `toggle` method has run.

>**Note:** All three of these parameters are *optional.*

Now that we know how the method works, let's look at different implementations of the method below!

# Examples
$$$$
## 1. Simple toggle

The example below shows how to simply use the `toggle` method

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").toggle();
  });
});
</script>
 </head>
 <body>
   <div id="content"/>
   <p>This paragraph will remain where it is</p>
   <h1>This will be toggled!</h1>
   <button>Click here to toggle!</button>
 </body>
</html>

codemirror

## 2. Adding delay

The example below shows how to add a delay to the `toggle` method. In this example,​ we have added a delay of 2 seconds

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").toggle(2000);
  });
});
</script>
 </head>
 <body>
   <div id="content"/>
   <p>This paragraph will remain where it is</p>
   <h1>This will be toggled!</h1>
   <button>Click here to toggle!</button>
 </body>
</html>

## 3. Adding delay without using numbers

The example below shows how to use the `delay` functionality, using built-in textual values, instead of giving it a time-limit

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("button").click(function(){
      //Change input text to slow, to see the change in toggle speed
    $("h1").toggle("fast");
  });
});
</script>
 </head>
 <body>
   <div id="content"/>
   <p>This paragraph will remain where it is</p>
   <h1>This will be toggled!</h1>
   <button>Click here to toggle!</button>
 </body>
</html>

## 4. Using the easing property

The example below shows how to change the `easing` property of the `toggle` method to `linear`, and how to add a time-delay of a few seconds.

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").toggle(2000,"linear");
  });
});
</script>
 </head>
 <body>
   <div id="content"/>
   <p>This paragraph will remain where it is</p>
   <h1>This will be toggled!</h1>
   <button>Click here to toggle!</button>
 </body>
</html>

## 5. Using callback

The example below shows how a `callback` method can be implemented in the `toggle` method upon its execution

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").toggle(2000,function(){
         alert("You can also call a function when toggle is completed");
    });
  });
});
</script>
 </head>
 <body>
   <div id="content"/>
   <p>This paragraph will remain where it is</p>
   <h1>This will be toggled!</h1>
   <button>Click here to toggle!</button>
 </body>
</html>

How to use toggle in jQuery

Toggle in jQuery simply refers to a built-in method that can be applied to any element on a page; it is used to hide or show that particular element. The button that is used to toggle moves over the text to hide it. Once clicked again, the button goes back to its original position and reveals the text. Syntax The toggle method has the syntax as shown below: 