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 library file via CDN.
jQuery CDN Link:
<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>
jQuery hide() method: This method is used for hiding the web elements.
Example 1: Create an HTML file and add the following code to it.
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- jQuery CDN link. --> < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" > </ script > </ head > < body > < button id = "btn" >Hide</ button > < p >< b >w3wiki</ b ></ p > <!-- Using hide() method to hide <p/> element. --> < script > $(document).ready(function () { $("#btn").click(function () { $("p").hide(); }); }); </ script > </ body > </ html > |
Output:
Example 2: We can use the hide() method to hide an image.
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- jQuery CDN link. --> < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" > </ script > </ head > < body > < img id = "image" src = "https://media.w3wiki.net/wp-content/uploads/20210805112556/gfgImage.png" alt = "" /> < button id = "btn" style="padding-left: 10px; margin-left: 30px"> Hide </ button > <!-- Using hide() method to hide an image.--> < script > $(document).ready(function () { $("#btn").click(function () { $("#image").hide(); }); }); </ script > </ body > </ html > |
Output:
Example 3: The hide() method can also be used to hide any geometrical shape.
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- jQuery CDN link. --> < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" > </ script > </ head > < body > < div id = "shape" style="height:100px; width:100px; background-color:green; border-radius:00%;margin:10px;"> </ div > < button id = "btn" style = "margin:10px;" >Hide Shape</ button > <!-- Using hide() method to hide a shape. --> < script > $(document).ready(function () { $("#btn").click(function () { $("#shape").hide(); }); }); </ script > </ body > </ html > |
Output:
Contact Us