Online Web Development Tutorials

jQuery toggle() method is used to display or hide the matched elements.

Below the syntax of jquery toggle() method

.toggle(display)

- display
- Type: Boolean
- Use true to show the element or false to hide it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery toggle()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#toggle").click(function() {
     $("p").toggle();
  });
});
</script>
</head>
<body>
 <p>jQuery is a lightweight, "write less, do more", JavaScript library. This tutorial will help you to learn jQuery selectors, effects, traversing, animation, attributes and more. The purpose of jQuery is to make it much easier to use JavaScript on your website. It is free, open-source software using the permissive MIT License. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.</p>
<button class="btn" id="toggle">Toggle</button>
 </body>
</html>

JQuery Toggle()