The jQuery .hide() method is used to hide selected elements. This tutorial covers different aspects of using the .hide() method with detailed explanations and examples.
You can use the .hide() method to hide an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Basic</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="hideButton">Hide Paragraph</button>
</body>
</html>
This example shows how to hide a paragraph when a button is clicked using the .hide() method.
You can specify the duration for the hide effect, making it a smooth transition.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Duration</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").hide(1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="hideButton">Hide Div with Duration</button>
</body>
</html>
This example demonstrates how to hide a div with a specified duration.
You can execute a callback function after the hide effect is completed.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden.");
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="hideButton">Hide Paragraph with Callback</button>
</body>
</html>
This example shows how to execute a callback function after hiding an element.
You can use different easing functions to change the hide animation's acceleration.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Easing</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").hide("slow", "easeOutBounce");
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="hideButton">Hide Div with Easing</button>
</body>
</html>
This example demonstrates how to use an easing function with the .hide() method.
You can hide multiple elements at once by selecting them using a common class or element type.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Multiple Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$(".hideable").hide();
});
});
</script>
</head>
<body>
<p class="hideable">Paragraph 1</p>
<p class="hideable">Paragraph 2</p>
<p class="hideable">Paragraph 3</p>
<button id="hideButton">Hide All Paragraphs</button>
</body>
</html>
This example shows how to hide multiple paragraphs with a single button click.
You can use the .toggle() method to toggle between hiding and showing elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="toggleButton">Toggle Visibility</button>
</body>
</html>
This example demonstrates how to toggle the visibility of a div using the .toggle() method.
The .hide() method sets the CSS display property of the selected elements to none.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - CSS Display Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide();
alert("CSS Display Property: " + $("p").css("display"));
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="hideButton">Hide Paragraph</button>
</body>
</html>
This example shows the effect of the .hide() method on the CSS display property of an element.
You can create custom hide animations using the .animate() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method - Custom Hide Animation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").animate({opacity: 0.25, height: "toggle"});
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="hideButton">Hide with Custom Animation</button>
</body>
</html>
This example demonstrates how to create a custom hide animation.
You can hide a parent element and all its children using the .hide() method.
<!DOCTYPE html>
<html>
head>
<title>jQuery .hide() Method - Hide Parent Element</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$(".parent").hide();
});
});
</script>
</head>
<body>
<div class="parent" style="background-color: yellow; padding: 10px;">
<p>This is a paragraph inside a div.</p>
<span>This is a span inside the same div.</span>
</div>
<button id="hideButton">Hide Parent Element</button>
</body>
</html>
This example shows how to hide a parent div and all its child elements.
You can chain the .hide() method with other jQuery methods for more complex animations and effects.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining Methods - .hide()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#chainButton").click(function(){
$("p").css("color", "red").slideUp(1000).hide(1000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="chainButton">Chain Methods</button>
</body>
</html>
This example demonstrates how to chain the .hide() method with other methods.
You can specify custom speeds for the hide effect using predefined speeds or milliseconds.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method - Custom Speed</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").hide(1500);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="hideButton">Hide with Custom Speed</button>
</body>
</html>
This example shows how to hide an element with a custom speed.
You can use the .slideUp() method to hide elements with a slide-up effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideUp() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("div").slideUp();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="slideUpButton">Hide with Slide Effect</button>
</body>
</html>
This example demonstrates how to hide an element with a slide-up effect.
You can use the .fadeOut() method to hide elements with a fade-out effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeOut() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("div").fadeOut();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="fadeOutButton">Hide with Fade Effect</button>
</body>
</html>
This example shows how to hide an element with a fade-out effect.
You can delay the hide effect using the .delay() method before hiding the element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .delay() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#delayButton").click(function(){
$("div").delay(2000).hide(1000);
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">This is a div element.</div>
<button id="delayButton">Hide with Delay</button>
</body>
</html>
This example demonstrates how to delay the hide effect before hiding an element.
You can hide elements when a user hovers over them using the .hover() method.
<!DOCTYPE html>
<html>
head>
<title>jQuery .hover() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("div").hover(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Hover over this div to hide it.</div>
</body>
</html>
This example shows how to hide an element when the user hovers over it.
You can hide elements in response to keyboard events such as pressing a specific key.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyboard Event - .hide()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).keypress(function(e){
if(e.which == 13) { // Enter key
$("div").hide();
}
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Press Enter to hide this div.</div>
</body>
</html>
This example demonstrates how to hide an element when a specific key is pressed.
You can hide elements in response to mouse events such as clicking or double-clicking.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Event - .hide()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Click on this div to hide it.</div>
</body>
</html>
This example shows how to hide an element when the user clicks on it.
You can hide elements when a form is submitted.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Submission - .hide()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
$("div").hide();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Type something">
<button type="submit">Submit</button>
</form>
<div style="background-color: yellow; padding: 10px;">This div will be hidden on form submission.</div>
</body>
</html>
This example demonstrates how to hide an element when a form is submitted.
You can hide elements when the browser window is resized.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Window Resize - .hide()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function(){
$("div").hide();
});
});
</script>
</head>
<body>
<div style="background-color: yellow; padding: 10px;">Resize the window to hide this div.</div>
</body>
</html>
This example shows how to hide an element when the window is resized.
You can restore the visibility of hidden elements using the .show() or .toggle() methods.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .show() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p style="display:none;">This is a hidden paragraph.</p>
<button id="showButton">Show Paragraph</button>
</body>
</html>
This example demonstrates how to restore the visibility of hidden elements using the .show() method.