jQuery Show Hide Toggle By Examples

jQuery Show Hide Toggle By Examples

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.

Ex1 – 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>

Ex2 – 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>

You may like

  1. jQuery toggle, show & hide By Example
  2. jQuery Text Method By Example
  3. Get and Set Input, Select box, Text, radio Value jQuery
  4. Duplicate Html Elements Using jQuery By Example
  5. jQuery | Event MouseUp By Example
  6. Event jQuery Mouseleave By Example
  7. jQuery Event Mouseenter Example
  8. Event jQuery MouseOver & MouseOut By Example
  9. keyup jquery event example
  10. Jquery Click Event Method with E.g.
  11. Event jQuery. Blur By Example

Leave a Reply

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