jQuery hide() and show(), Easy To Learn jQuery hide() and show()

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