Advertisement
Google Ad Slot: content-top
JQuery Hide/Show
jQuery hide() and show() Methods
These methods allow you to toggle visibility of elements on your webpage.
Basic Syntax:
$(selector).hide(); // Hides the selected element(s) $(selector).show(); // Shows the selected element(s)
Example
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#text").hide();
});
$("#showBtn").click(function() {
$("#text").show();
});
});
</script>
You can also add speed to make the hiding or showing smoother:
Syntax:
$(selector).hide(speed, callback); $(selector).show(speed, callback);
speed– Optional. Defines the speed of the animation: Can be"slow","fast", or a time in milliseconds (e.g.,1000)callback– Optional. A function to execute after the animation completes.
Example
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#text").hide("slow");
});
$("#showBtn").click(function() {
$("#text").show("5000");
});
});
</script>
jQuery toggle()
The toggle() method is used to switch between hiding and showing an element.
It's a shortcut that replaces writing both hide() and show() manually.
How It Works:
- If the element is currently visible,
toggle()will hide it. - If the element is hidden,
toggle()will show it. - You can also use it with animation speed and callback functions.
Example
<script>
$(document).ready(function() {
$("#toggleBtn").click(function() {
$("#text").toggle(); // Hides if visible, shows if hidden
});
});
</script>