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
div
element 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#content
element.
- We use jQuery’s
-
CSS:
- A basic style is applied to the
#content
element, 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.