jQuery toggle() Method

jQuery Web Development Front End Technology

The toggle() method in jQuery is used to toggle between hide() and show() for the selected elements.

Syntax

The syntax is as follows −

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

Above, the parameter speed is the speed of the hide/show effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after toggle() completes.

Example

Let us now see an example to implement the jQuery toggle() method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         $("p").slideToggle();
      });
   });
</script>
</head>
<body>
<h2>Exam Info</h2>
<p>Examination begins on 24th December. The students are requested to submit project report before 15th December.</p>
<button>Toggle</button>
</body>
</html>