home

Jquery Hide-Show

Jquery gives you the flexibility to hide and show to the matched elements with magic of jquery, Jquery hide and show methods are used to hide or show certain elements on required time. And this has some optional parameters to set speed of hiding and showing of the output, and another optional parameter call back function can executes after the current hide and show methods completes.

Coming to the below code overview, here we have two buttons with different ids(id=”hide”, id=”show”), in the next step we have div element with class of .box containing with a small paragraph. After that we have simple basic jquery hide and show code, to describe more, when you clicks on hide button(#hide) box class(.box) div will be hide, again when you clicks on other button(#show) then box class(.box) will be show.

Jquery Hide/Show Demo


If you click on the "Hide" button, I will disappear

Jquery hide show works like toggle, and here we have simple jquery hide show effects code.

 $("#hide").click(function(){
        $(".box").hide(1000);
    });
    $("#show").click(function(){
        $(".box").show(1000);
    });

<button id="hide">Hide</button>
<button id="show">Show</button>
<div class="box">If you click on the "Hide" button, I will disappear</div> .box{ margin: 1.5em auto; width: 10em; height: 10em; background: red; float:left; }