Free Web Development Online Tutorials, Learn to Code
Learn Jquery Function, Hide Show method using jQuery Example,JQuery DOM, Effects

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.

jQuery show and hide Methods

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.

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>

Here are somne content to demonstrate show / hide functionality

Hide Show Effect Duration

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>
Example

Fast Effect: somne content to demonstrate show / hide functionality
Slow Effect: somne content to demonstrate show / hide functionality

callback function inside Hide Show method

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>
Example

Notice: a callback function will be executed ..after show / hide
Comment
Name
Email
Website
Subscribe
 
Jquery Hide Show Example

jQuery Examples | JavaScript Online Course