JQuery Toggle Hide Show Div On Click Event

JQuery Toggle Hide Show Div On Click Event

Show Hide toggle() jQuery Toggle Animation Method; Through this tutorial; you will learn how to use jQuery toggle method with html elements (div, p, button tag) or webpages for show and hide elements.

This tutorial will show you with simple example how to use these toggle effects for show hide HTML elements using jQuery toggle method.

JQuery Toggle Hide Show Div On Click Event Example

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 Toggle for Show Hide

$(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>

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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