Hide blocks in jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
  $("content").click(function(){
	$(this).hide();
  });
  $("#myid").click(function(){
	$(this).hide();
  });
  $(".myclass").click(function(){
	$(this).hide();
  });
});
</script>
</head>
<body>

<p>I am a paragraph</p>
<content>I am a content</content>
<ul id="myid">
<li>I am an unordered list identified as myid</li>
</ul>

<div class="myclass">
I am a div identified as myclass
</div>

</body>
</html>

The above snippet will help to hide the given blocks like in paragraph, content and unordered list blocks.

Initially it blocks everything. When we click any of the blocks, it will hide. After clicking the paragraph in the first line, this is what you see.

This helps to hide standard blocks using its tag or id or class names!

Leave a Comment

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

Scroll to Top