-1726209433.jpeg)
To hide and show div dynamically using jquery you can use the hide() for hide an element , and show() method for show an element.
Here is the basic example of hide and show.
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
.hide(): Hides the selected elements..show(): Shows the selected elements.
Here is the full example of show and hide a div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide_div").click(function(){
$("p").hide();
});
$("#show_div").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide_div">Hide</button>
<button id="show_div">Show</button>
</body>
</html>
-
Hide Button:
- When the
#hide_diveis clicked, the <p> element will be hidden using the.hide()method.
- When the
-
Show Button:
- When the
#show_diveis clicked, the <p> element will be shown using the.show()method.
- When the
How to toggle between show and hide in jQuery?
toggle() Method in jQuery: The toggle() method shows & hides the selected elements together.
The simplest use of toggle() will toggle the visibility of an element instantly. check the bellow:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('.box').toggle(); // Toggles visibility instantly
});
});
</script>
</head>
<body>
<div class="box">If you click on the "Hide" button, I will disappear.</div>
<button id="toggleButton">toggle Button</button>
</body>
</html>
In this example, toggle used to between the hide() and show() method.
Use the animation effect on show/hide
Show / Hide elements with animation is a very dynamic part for designer. you can simply set the effect for toggle.
Show/Hide with Slow Effect:
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('.box').toggle('slow'); // Toggles visibility slowly
});
});
</script>
This method toggles the visibility of the element with a sliding effect that takes "slow" time to complete
Custom Duration for toggles:
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('.box').toggle(1000); // 1000 milliseconds = 1 second
});
});
</script>
Now, effect will delay 1000 milliseconds.
Same thing you can do with .hide() & .show() method for animation.
<script>
$(document).ready(function(){
$("#hide_div").click(function(){
$("p").hide('slow');
});
$("#show_div").click(function(){
$("p").show('slow'); // Shows with a slow animation
});
});
</script>
Fade In/Out
$('.box').fadeIn(); // Fades in instantly
$('.box').fadeIn('slow'); // Fades in with a slow animation
<script>
$(document).ready(function() {
$('#fadeOutButton').click(function() {
$('.box').fadeOut('slow'); // Fade out with animation
});
$('#fadeInButton').click(function() {
$('.box').fadeIn('slow'); // Fade in with animation
});
});
</script>
Using jQuery's hide(), show(), and toggle() methods, you can easily control the visibility of elements with animations. you can customize the animation duration and type of animation to suit your needs.
If you have any other questions or need further examples, let us know and upload the question in our forum tapgen.xyz
Learn to code with the world's largest web developer site. Not sure where to begin? HTML is The language for building web pages Learn HTML Tutorial with Tapgen.
=================================