jQuery toggle, show & hide  Examples

jQuery toggle, show & hide Examples

Effect Show() / Hide() By jQuery – how to use this effects 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 effects.

You can show and hide HTML elements using the jQuery show() and hide() effect methods.

jQuery Show Effect

The jQuery show() effect method is used to show the selected Html elements.

Syntax

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

Parameters of Show Method

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

jQuery show() example

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

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
  $("#first").show();
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery show and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
    $("#first").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery Hide Effect

The jQuery hide() effect method is used to hide the selected Html elements.

Syntax

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

Parameters of Hide() Method

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

jQuery Hide() example

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

$(".btn-show").click(function(){
  $("#first_hide").show("fast");
  });
});
</script>
</head>
<body>

<h4 id="first_hide"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

jQuery hide and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show &amp; Hide with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
  $(".btn-hide").click(function(){
    $("#second").hide(1000,"swing",function(){
      alert("Hide() method is finished!");
    });
  });
$(".btn-show").click(function(){
    $("#second").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="second"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

toggle jQuery Method

toggle() method is used to change the to show or hide HTML elements (like input, text, paragraph, div, image, etc.). You can use the toggle method when you want to toggle between the hide and show of the selected HTML element.

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:- This is an optional parameter. you can specify what to do after the hide() method is called.

jQuery toggle() example

In the below example you can see that the toggle() method takes an argument “fast” to toggle between hide and show the selected <p> tag element.

<!DOCTYPE html>
<html>
<head>
<title> jQuery Toggle </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function(){
  $(".togglebtn").click(function(){
  $("#second").toggle("fast");
  });

});
</script>
</head>
<body>

<h4 id="second"> Hide and Show - Speed</h4>
<button class="togglebtn">Toggle</button>

</body>
</html>

You may like

  1. jQuery Text Method By Example
  2. Get and Set Input, Select box, Text, radio Value jQuery
  3. Duplicate Html Elements Using jQuery By Example
  4. jQuery | Event MouseUp By Example
  5. Event jQuery Mouseleave By Example
  6. jQuery Event Mouseenter Example
  7. Event jQuery MouseOver & MouseOut By Example
  8. keyup jquery event example
  9. Jquery Click Event Method with E.g.
  10. Event jQuery. Blur By Example
  11. jQuery form submit event with example
  12. keydown function jQuery
  13. List of jQuery Events Handling Methods with examples
  14. Jquery Selector by .class | name | #id | Elements
  15. How to Get the Current Page URL in jQuery

Leave a Reply

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