Tutorial

Sign Up

log In

JQuery
JQuery Hide/Show

❮ Previous

Next ❯

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.