jQuery Effects - hide () and show ()
jQuery Tutorial » jQuery Effects - hide () and show ()
What does jQuery show hide do?
In this article, we show you how to show / hide an item using jQuery.
We can do this using the jQuery method such as: show (), hide (), css (), slide(), fade (), animate (), toggle ().
Syntax:
$(selector).show(speed,callback);
We can add optional speed parameter specifies the speed of the hiding/showing, and they can take the following values as: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes
jQuery hide() and show() - Example
With hide() and show() jQuery methods, we can hide and display HTML items:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.<br />
Then click on the "Show" button, <strong>I am back</strong>. </p>
<button style="padding:10px 20px; background:#3FF" id="hide">Hide</button>
<button style="padding:10px 20px; background:#FF6" id="show">Show</button>
</body>
</html>
Related subjects:
jQuery Attributes
jQuery syntax
jQuery selectors
Tags: jquery hide: div, show, button, not working, div by id, class, all elements with class, function,
jquery hide show, div, not working, transition, element by id, fade, password, class, by id, example, boolean,
What does jQuery show hide do?
How do I toggle Show hide in jQuery?
What is hide show?
How do you use hide and show?
jQuery hide() and show() animated
You can optionally specify the duration (speed) for jQuery to show animated hiding over a period of time.
Durations can be specified using either: "slow", "fast" or time in milliseconds, for greater accuracy; higher values indicate slower animations.
For example:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animated Show Hide Effects</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
padding: 16px;
background-color: #9CF;
}
</style>
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(60);
$("p.very-slow").hide(3000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(60);
$("p.very-slow").show(3000);
});
});
</script>
</head>
<body>
<button style="padding:10px 20px; background: #F00; color:#FFF" type="button" class="hide-btn">Hide Paragraphs</button>
<button style="padding:10px 20px; background: #390; color:#FFF" type="button" class="show-btn">Show Paragraphs</button>
<p class="very-fast">This paragraph will show()/hide() with very fast speed.</p>
<p class="normal">This paragraph will show()/hide() with default speed.</p>
<p class="fast">This paragraph will show()/hide() with fast speed.</p>
<p class="slow">This paragraph will show()/hide() with slow speed.</p>
<p class="very-slow">This paragraph will show()/hide() with very slow speed.</p>
</body>
</html>
The speed string 'fast' means 200 milliseconds, while the string 'slow' means 600 milliseconds.
toggle() Method - Example
You can toggle between hiding and displaying an element with the toggle() method.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animated Toggle Effect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
padding: 16px 20px;
background-color: #9CF;
}
</style>
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>
</head>
<body>
<button style="padding:10px 20px; background:#3C0" type="button" class="toggle-btn">Toggle Paragraphs</button>
<p class="very-fast">This paragraph will show()/hide() with very fast speed.</p>
<p class="normal">This paragraph will show()/hide() with default speed.</p>
<p class="fast">This paragraph will show()/hide() with fast speed.</p>
<p class="slow">This paragraph will show()/hide() with slow speed.</p>
<p class="very-slow">This paragraph will show()/hide() with very slow speed.</p>
</body>
</html>
jquery hide: div, show, button, not working, div by id, class, all elements with class, function,
jquery hide show, div, not working, transition, element by id, fade, password, class, by id, example, boolean,
What does jQuery show hide do?
How do I toggle Show hide in jQuery?
What is hide show?
How do you use hide and show?
JQuery Effects - hide () and show () - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.