Examples
jQuery hide()
Demonstrates how to use the simple hide() method in jQuery to make elements
invisible.
Another hide() Example
Shows how to hide specific parts of the text on a page using jQuery.
jQuery hide() and show()
Using jQuery, you can toggle the visibility of HTML elements with the
hide() and show() methods.
Example:
The following code hides all <p> elements when the "Hide" button is
clicked, and shows them again when the "Show" button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide and Show Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Hide clicked paragraph only
$("p").on("click", function(){
$(this).hide();
});
// Hide all paragraphs
$("#hide").click(function(){
$("p").hide();
});
// Show all paragraphs
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h2>Click paragraphs or use buttons</h2>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<br><br>
<button id="hide">Hide All</button>
<button id="show">Show All</button>
</body>
</html>
These methods are useful for creating interactive content that responds to
user actions.
Syntax
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
The speed parameter is optional and controls how fast the element is
hidden or shown. It can be:
- "slow"
- "fast"
- A value in milliseconds (e.g., 1000 for 1 second)
- The callback parameter is also optional. It allows you to specify a function that will run once the hide() or show() action is complete.
(You'll learn more about callback functions in a later chapter.)
Example: Using hide() with Speed
The following example hides all <p> elements over a duration of 1
second when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide with Animation</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Hide paragraph when clicked
$("p").on("click", function(){
$(this).hide();
});
// Hide all paragraphs when "Hide" button is clicked
$("#hide").click(function(){
$("p").hide(1000); // with 1 second animation
});
// Show all paragraphs when "Show" button is clicked
$("#show").click(function(){
$("p").show(1000); // with 1 second animation
});
// If ANY button is clicked -> hide paragraphs with animation
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<h2>Click paragraphs or use buttons</h2>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<br><br>
<button id="hide">Hide All</button>
<button id="show">Show All</button>
<button id="special">Special Button</button>
</body>
</html>
This creates a smooth hiding effect by specifying the speed in
milliseconds.
jQuery toggle()
The toggle() method allows you to switch between hiding and showing
elements.
If the element is visible, it will be hidden; if it’s hidden, it will
be shown.
Example: Toggling Visibility
The following code toggles the visibility of all <p> elements
when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Toggle Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Toggle paragraphs when any button is clicked
$("button").click(function(){
$("p").toggle(1000); // 1000ms = 1s animation
});
});
</script>
</head>
<body>
<h2>Toggle Example</h2>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<br><br>
<button>Toggle Paragraphs</button>
</body>
</html>
Syntax
$(selector).toggle(speed, callback);
- speed (optional) – Specifies the speed of the toggle effect.Possible values: "slow", "fast", or a number in milliseconds (e.g., 1000).
- callback (optional) – A function to be executed after the toggle action is complete.
This method is useful for creating simple toggle effects without having
to use both hide() and show() separately.
More topic in jQuery
