jQuery toggle() Effect

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

jQuery toggle method first check the selected element is hidden then run show() to visible an element If element is visible then run hide() to hidden an element. In this way this method create a toggle effect.


$(selector).toggle();        // This syntax does not accept any arguments.
$(selector).toggle( [duration], [callback]);


  • duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).

  • callback Optional. A function to call once the animation is complete.


<!DOCTYPE html>
  <title>jQuery toggle() method</title>
  <script src="jquery-latest.min.js"></script>
    $(document).ready(function() {
      $("#toggle").click(function () {
  <button id="toggle">Hide/Show</button> 
  <p style="background-color:#99FFFF;font-size:16px;font-family:Verdana;">Paragraph will hide after click</p>

Run it...   »

Example Result :

Here are all jQuery effects references, see all jQuery effects references.