jQuery Show Hide Effects Example

In this tutorial you will learn how to hide and show element using jquery .

When you take mouse over some html element then some additional information will show up, and when you take mouse out from that element, the additional information automatically gets hidden, here in below example i have used mouse click to show and hide additional information, you can use any event as per your requirement.

In modern web designing showing and hiding different elements on web page is very common requirement, earlier we used to write display: none and display: block.

jQuery show and hide Methods

You can hide / show any HTML elements using the jQuery show() hide() methods.

Before using any jQuery function you must add the JQuery Script reference either from any CDN or from your local script folder like example below.

<script src="jquery/3.4.1/jquery.min.js"></script>

Now with just few line of code you can write hide and show functionality using jQuery method, you can hide or show any html element by calling them either Id or Css class name, here in below example we are hiding a div by calling their id (you can use the same syntax for calling by css class name, just use .className instead of #id)

<script type="text/javascript">
$(document).ready(function(){
    // Hide displayed content
    $("#btnHide").click(function(){
        $("#divContent").hide();
    });
    
    // Show hidden content
    $("#btnShow").click(function(){
        $("#divContent").show();
    });
});
</script>

You also can optionally specify the duration (referred as speed) parameter for the show hide effect, it will look like light animated for a specified period of time.

<script type="text/javascript">
$(document).ready(function () {
    // Hide displayed paragraphs with different speeds
    $("#btnHide1").click(function () {
        $("#divContent-fast").hide(50); // fast
        $("#divContent-slow").hide(2000); // slow
    });
    // Show hidden paragraphs with different speeds
    $("#btnShow1").click(function () {
        $("#divContent-fast").show(50); // fast
        $("#divContent-slow").show(2000); //slow
    });
});
</script>

In case you want some other functions to be executed within hide and show function, you can also specify a callback function within the hide an show method.

<script>
$(document).ready(function () {
    // Show alert message after hide-complete
    $("#btnHide2").click(function () {
        $("#divContent2").hide("slow", function () {
            // some code to be executed
            alert("hide complete");
        });
    });
    // Show alert message after show-complete
    $("#btnShow2").click(function () {
        $("#divContent2").show("slow", function () {
            // some code to be executed
            alert("show complete");
        });
    });
});
</script>