jQuery Hide Show


jQuery Effect - Hide and Show


jQuery Hide and Show Effect
jQuery Hide Show Effect jQuery Tutorial CodingTuting

Syntax:

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

Both Hide() and Show() methods have two optional parameters.

1. The parameter "speed" is used to change the default speed of Hiding and Showing. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the Hide/Show method completed. We'll learn about callback in the upcoming chapter.


1)   jQuery Hide()

jQuery Hide() Method is use to hide the HTML element.


Example:

This will hide the element <p>

 <button class="eg-button">Text Hide</button>

 <p> This is an example text. Click on the above button to hide this text. </p>
  
 $(document).ready(function(){
     $(".eg-button").click(function(){
         $("p").hide();
     });
 });
 

Output:


This is an example text. Click on the above button to hide this text.


2)   jQuery Show()

jQuery show() Method is use to show the hide HTML element.


Example:

This will show the hide the element <p>

    <button class="show-btn">Text Show</button>

    <p> This is an example text. Click on the above button to show this text. </p>
 
$(document).ready(function(){
    $("p").hide();
   
    $(".show-btn").click(function(){
        $("p").show();
    });
});


Output:


This is an example text. Click on the above button to show this text.


Thanks for Reading


Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Share this

Related Posts