jQuery Effects – Hide and Show: Toggle Visibility with Ease
To implement the Hide and Show effects in jQuery, you’ll typically use jQuery’s built-in methods like .hide(), .show(), .fadeIn(), and .fadeOut() to control the visibility of elements.
Here’s an example code to demonstrate how to hide and show elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="jQuery Effects - Hide and Show: Toggle Visibility with Ease">
<meta name="description" content="Learn how to implement jQuery hide and show effects to toggle visibility on elements. This tutorial explains the use of basic hide, show, and fade effects with examples.">
<meta name="keywords" content="jQuery, Hide and Show, jQuery Effects, jQuery Tutorial, Web Development, Toggle Visibility, Fade In, Fade Out, jQuery Code">
<title>jQuery Effects - Hide and Show</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#content {
width: 100%;
height: 150px;
background-color: #3498db;
color: white;
text-align: center;
padding: 50px;
margin: 20px 0;
display: none;
}
</style>
</head>
<body>
<h2>Toggle the Visibility of the Box</h2>
<!-- Buttons to trigger actions -->
<button id="btnShow">Show Box</button>
<button id="btnHide">Hide Box</button>
<button id="btnFadeIn">Fade In</button>
<button id="btnFadeOut">Fade Out</button>
<!-- The content that will be hidden or shown -->
<div id="content">
This is the content that can be shown or hidden.
</div>
<script src="myscripts.js"></script>
</body>
</html>
Here’s myscripts.js :
$(document).ready(function(){
// Show the content
$("#btnShow").click(function(){
$("#content").show();
});
// Hide the content
$("#btnHide").click(function(){
$("#content").hide();
});
// Fade in the content
$("#btnFadeIn").click(function(){
$("#content").fadeIn();
});
// Fade out the content
$("#btnFadeOut").click(function(){
$("#content").fadeOut();
});
});
Explanation:
-
HTML Structure:
- The page includes buttons for showing, hiding, fading in, and fading out a
divelement with the IDcontent.
- The page includes buttons for showing, hiding, fading in, and fading out a
-
jQuery Code:
- We use jQuery’s
$(document).ready()to ensure the code runs when the page is loaded. - For each button click (
#btnShow,#btnHide,#btnFadeIn, and#btnFadeOut), corresponding jQuery methods are used to either show, hide, or apply a fade effect to the#contentelement.
- We use jQuery’s
-
CSS:
- A basic style is applied to the
#contentelement, including a background color, text color, padding, and the initial state set todisplay: none(hidden).
- A basic style is applied to the
jQuery Methods:
.show(): Displays the element immediately..hide(): Hides the element immediately..fadeIn(): Gradually fades in the element..fadeOut(): Gradually fades out the element.