jquery
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 :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.