Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
How can I show and hide an HTML element using jQuery?
To hide and show an HTML element using jQuery, use the hide() and show() methods. These methods allow you to dynamically control the visibility of elements on your webpage. Here, the <p> element is hidden and shown on button click.
Example
The following example demonstrates how to hide and show a paragraph element using jQuery methods ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#visible").click(function(){
$("p").show();
});
$("#hidden").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>This text will show on clicking "Show element" button, and hide on clicking "Hide element" button.</p>
<button id="hidden">Hide element</button>
<button id="visible">Show element</button>
</body>
</html>
In this example:
- The
show()method makes the hidden element visible - The
hide()method makes the visible element disappear - Both methods can accept optional parameters for animation speed
Alternative Methods
You can also use the toggle() method to switch between show and hide states ?
$("#toggleButton").click(function(){
$("p").toggle();
});
Conclusion
jQuery's show(), hide(), and toggle() methods provide simple and effective ways to control element visibility. These methods are essential for creating interactive web pages with dynamic content display.
Updated on: 2026-03-13T19:24:40+05:30
1K+ Views
Advertisements