JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Show and Hide Effects

In this tutorial you will learn how to show hide HTML elements using jQuery.

jQuery show() and hide() Methods

You can show and hide HTML elements using the jQuery show() and hide() 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.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Hide displayed paragraphs
  •     $(".hide-btn").click(function(){
  •         $("p").hide();
  •     });
  •     
  •     // Show hidden paragraphs
  •     $(".show-btn").click(function(){
  •         $("p").show();
  •     });
  • });
  • </script>

You can optionally specify the duration (also referred as speed) parameter for making the jQuery show hide effect animated over a specified period of time.

Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

  • <script type="text/javascript">
  • $(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(50);
  •         $("p.very-slow").hide(2000);
  •     });
  •     
  •     // 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(50);
  •         $("p.very-slow").show(2000);
  •     });
  • });
  • </script>

Note: The speed or duration string 'fast' indicates the durations of 200 milliseconds, while the string 'slow' indicates the durations of 600 milliseconds.

You can also specify a callback function to be executed after the show() or hide() method completes. We'll learn more about the callback function in upcoming chapters.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Display alert message after hiding paragraphs
  •     $(".hide-btn").click(function(){
  •         $("p").hide("slow", function(){
  •             // Code to be executed
  •             alert("The hide effect is completed.");
  •         });
  •     });
  •     
  •     // Display alert message after showing paragraphs
  •     $(".show-btn").click(function(){
  •         $("p").show("slow", function(){
  •             // Code to be executed
  •             alert("The show effect is completed.");
  •         });
  •     });
  • });
  • </script>

jQuery toggle() Method

The jQuery toggle() method show or hide the elements in such a way that if the element is initially displayed, it will be hidden; if hidden, it will be displayed (i.e. toggles the visibility).

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Toggles paragraphs display
  •     $(".toggle-btn").click(function(){
  •         $("p").toggle();
  •     });
  • });
  • </script>

Similarly, you can specify the duration parameter for the toggle() method to make it animated like the show() and hide() methods.

  • <script type="text/javascript">
  • $(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>

Similarly, you can also specify a callback function for the toggle() method.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Display alert message after toggling paragraphs
  •     $(".toggle-btn").click(function(){
  •         $("p").toggle(1000, function(){
  •             // Code to be executed
  •             alert("The toggle effect is completed.");
  •         });
  •     });
  • });
  • </script>

Your Feedback:

We would love to hear from you, please drop us a line.