How to hide block of HTML code on a button click using jQuery ? Last Updated : 10 Aug, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to hide a block of HTML code with a button click. We can do this by using the jQuery inbuilt hide() method. Let's briefly learn the functionality of this method. hide(): In CSS, we have a property display:none which basically hides the element. This hide() method in jQuery also hides the selected element. Syntax: $(selector).hide() Example 1: In the following example, text will be hidden after 2 seconds. The selected element will be hidden immediately. This is the same as calling .css("display", "none"). Before hiding, the hide() method saves the value of the "display" property in jQuery's data cache so that the "display" can be later restored to its initial value. HTML <!DOCTYPE html> <head> <!-- jQuery library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> </head> <body> <p>Below text will remove in 2 sec</p> <p id="test"> Hello Geeks </p> <script> setTimeout(function(){ $("#test").hide() },2000) </script> </body> </html> Output: hide method Example 2: In the following example, we will learn how we can hide a block of HTML code on a button click using jQuery. HTML <!DOCTYPE html> <head> <!-- jQuery library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> </head> <body> <p>Click on the button to hide below text.</p> <p id="test"> Hello Geeks </p> <button>Click Me</button> <script> $('button').click(function(){ $("#test").hide() }) </script> </body> </html> Output: hide on click Comment More infoAdvertise with us Next Article How to hide block of HTML code on a button click using jQuery ? H hrtkdwd Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to hide/show an image on button click using jQuery ? In this article, we will see how we can hide or show any particular image in jQuery when a button gets clicked. This is quite easy to do with some lines of jQuery code. Before we jump to the topic, let's know which methods of jQuery will be used for this. So there is a method called show() and anoth 3 min read How to use hide() method on button click using jQuery ? jQuery has a lot of handy methods to get the work done easily. In this article, we will discuss one of them which is the hide() method. We can use this method for various purposes on our webpage and get an efficient result. The very first step will be creating an HTML file and link the jQuery librar 2 min read How to hide a div when the user clicks outside of it using jQuery? In this article, we will learn how an element can be hidden on click to its surroundings using jQuery. An element can be shown or hidden when clicked outside of it using the methods discussed below: Table of Content Using the closest() methodBy checking whether element is clicked or its surroundings 3 min read How to make a Disable Buttons using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a Disable Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet 1 min read How to Hide an HTML Element in Mobile View using jQuery ? Suppose we have given an HTML document and the task is to hide an HTML element in mobile view with the help of jQuery. Approach: Initially, we are required to detect whether our system is 'Mobile' or not, for that window.navigator.userAgent property is used. It returns a string containing informatio 2 min read How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will 2 min read How to show/hide an element using jQuery ? We are given an element and the task is to to show/hide the element using jQuery. Below are the approaches to show/hide an element using jQuery:Table of ContentUsing css() methodsUsing show methodUsing Toggle methodApproach 1: Using css() methodsIt takes two parameters where the first parameter is t 3 min read How to enable/disable a button using jQuery ? Enabling/disabling a button using jQuery involves altering its functionality to either accept user input or not. This is typically done by manipulating its 'disabled' property or attribute through jQuery methods like `.prop()` or .attr().To enable/disable a button using jQuery, you'll need a basic H 2 min read How to add jQuery code to HTML file ? In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and 2 min read How to Disable a Button in jQuery UI ? To disable a button in jQuery UI, we will be using disable() method which is discussed below: jQuery UI disable() method is used to completely disable the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("disable") Parameters: This method does not 2 min read Like