jQuery hide() and show() Effects

The jQuery effects are hide and show HTML elements using the jQuery hide() and show() methods.

The hide() method simply sets the inline style display: none for the selected elements. Conversely, the show() method restores the display properties of the matched set of elements to whatever they initially were—typically block, inline, or inline-block—before the inline style display: none was applied to them. Here's is an example.

The jQuery hide() and show() methods iare used to hide and show the selected elements.

Syntax :

$(selector).hide();

$(selector).hide(speed, callback);

$(selector).hide(speed, easing, callback);

jQuery hide() and show() Effects

<!DOCTYPE html>
<html>
<head>
<title>jQuery hide() and show()</title>
 
<style type="text/css">
.button{ padding:6px 15px; margin:5px 0px;}
.box{ 
width:300px; 
height:auto; 
padding:0px 10px; 
font-style:italic; 
border:1px solid #0099da; 
border-radius:3px; 
text-align:justify;
}
</style>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#hide").click(function(){
        $("div").hide();
    });
    $("#show").click(function(){
        $("div").show();
    });
});
</script>
</head>
<body>
 
<button id="hide" class="button">Hide</button>
<button id="show" class="button">Show</button>
<div class="box">
<p>
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
 
</body>
</html>

Output :

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.

Another Example :

<!DOCTYPE html>
<html>
<head>
<title>jQuery hide() and show()</title>
 
<style type="text/css">
.button{ padding:6px 15px; margin:5px 0px;}
.box{ 
width:300px; 
height:auto; 
padding:0px 10px; 
font-style:italic; 
border:1px solid #0099da; 
border-radius:3px; 
text-align:justify;
}
</style>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").hide(2000);
    });
$("#show_btn").click(function(){
        $("div").show(1000);
    });
});
</script>
</head>
<body>
 
<button class="button">Hide</button>
<button id="show_btn" class="button">Show</button>
<div class="box">
<p>
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
 
</body>
</html>

Output :

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Shown elements are hidden and hidden elements are shown :

<!DOCTYPE html>
<html>
<head>
<title>jQuery toggle()</title>
 
<style type="text/css">
.button{ padding:6px 15px; margin:5px 0px;}
.box{ 
width:300px; 
height:auto; 
padding:0px 10px; 
font-style:italic; 
border:1px solid #0099da; 
border-radius:3px; 
text-align:justify;
}
</style>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
//$("p").toggle();
        $("div").toggle();
    });
});
</script>
</head>
<body>
 
<button class="button">Click Here!</button>
<div class="box">
<p>
Dummy Text : Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
 
</body>
</html>

Output :

jQuery Tutorial