In this tutorial we will see how to Show and Hide Element on Click using JQuery. JQuery toggle() method is used for this purpose.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide Element on Click using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>How To Code School</p>
<button>Hide/Show</button>
</body>
</html>
JQuery Code
JQuery Code is given below. In this code the JQuery toggle() method is used which toggles the state of paragraph element between hide and show.
In simple words, the toggle() method will hide the html element if it's already being displayed or it will display the element if it's already hidden.
You can use any html element in place of this paragraph element to hide or show it using Jquery toggle method.
<script>
$("button").click(function(){
$("p").toggle();
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Show and Hide Element on Click using JQuery.