jQuery Api Toggle Show Hide Animation

Show() / Hide() By jQuery Toggle Animation Method – how to use this method with html elements or webpages. We are going to show you with simple example how to use this effects. Here you will learn how to show hide HTML elements using jQuery toggle method.

jQuery Toggle Animation Effect

The toggle() animation method is used to toggle(hide/show) the selected Html elements. You can use the toggle method when you want to toggle between the hide and show of the selected HTML elements on webpage.

Syntax

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

Parameters of toggle method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the toggle() method is called.

jQuery toggle() example

In the below example you can see that toggle() method effect.

<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn-toggle").click(function(){
  $("#first_toggle").toggle("slow");
  });

});
</script>
</head>
<body>
<div id="first_toggle">Toggle Method - Slow</div>
<button class="btn-toggle">Toggle</button>
</body>
</html>

jQuery toggle and callback example

<!DOCTYPE html>
<html>
<head>
<title>jQuery Method Toggle with callback</title>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function(){
  $(".btn-toggle").click(function(){
    $("#toggle_call").toggle(1000,"swing",function(){
      alert("toggle() method is finished!");
    });
  });
});
</script>
</head>
<body>

<div id="toggle_call"> Toggle - Callback </div>
<button class="btn-toggle">Toggle</button>

</body>
</html>

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *