Show and Hide Element on Click using JQuery

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

Check Demo

Video Tutorial

Watch video tutorial on how to Show and Hide Element on Click using JQuery.