**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 hides or shows elements with configurable speed, easing, and optional callback functions.