With jQuery, we can **chain multiple methods** on an element. We do not need to select the same element multiple times to implement a method on it. Rather, we can just add the methods together into one single line of code.

#    
#  Syntax

```
$(element).action1().action2()...
```


##   
## Code
In the example below, when you click the button, the paragraph element, which has the id `test`, has methods called on it one after the other using method chaining.

First, we change the text color and then slide the paragraph element up and down.

<html>

<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>

  
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        // add chained methods
        $("#test").css("color", "green").slideUp(1000).slideDown(1000);
      })
    });
  </script>
</head>

<body>
  <div>
    <h1>This is about "chaining()" in JQuery</h1>
    <p id="test">I would be toggled</p>
    <br/>
    <button>Toggle Paragraph</button>
  </div>
</body>

</html>

codemirror

What is method chaining in jQuery?

Chaining jQuery methods lets you apply multiple actions to an element in a single line.