Showing elements using jQuery


In this lesson, you will learn how to show an invisible element on a web page using jQuery.

Introduction

The signature of the show() function is similar to the hide() function of the jQuery.

show( duration [, easing function ] [, complete])

Duration could be a string( slow, normal, fast) or number( representation of time in milliseconds) to determine how long the animation will take to progress.

The second parameter is the name of the easing function use for the transition.

The third parameter is a call back function, which is called when the effect is complete.

All of these three parameters are optional, and without any parameters, the .show() function is the simplest way to show an already invisible element.

Tip: You can only use .show() function on an element if it is already hidden using display:none or .hide() method. $(‘element’).show();

The selected element will be displayed without any delay, with no animation effect. This is almost equal to reviving the display property of an element before it was set to hidden. Let’s say, if the element had a display value of inline at the time it was hidden, it will once again be displayed inline.

If the element had a display property set as a block, calling .show() on it, is similar to calling .css('display', 'block');

With a .show() function in jQuery, there is a catch though. Let’s say you have hidden the element by setting the display property of the element as none with the important flag, like:

display : none !important;

.show() may not show the element as it cannot overwrite the important flag.

Duration is given in milliseconds and 1 second is equal to 1000 milliseconds. The string values like fast, normal, and slow are equivalent to 200, 400, and 600 milliseconds.

jQuery 1.4.3 introduced an easing function which specifies the animation progression speed at various point along the timeline. The default easing function is called swing. The other one is called linear, which ensures the animation progression at a constant speed.

If written, the callback function is called only once when the animation is complete. This can be useful for creating animations in sequence.

Example of showing elements in jQuery

In this example, we have used hide() and show() functions to extend the functionality of the previous lesson’s example. Now, if you click on the ‘Show the image’ hyperlink, the hidden image will be displayed again.

jQuery Hide
jQuery Show

The HTML

<div id="container">
<div class="quote">
<img src="https://serving.photos.photobox.com/420588101daa7d26b4ebc39c032ab3e32a135fd9b0d142bd5a5f5cfdf8784dc19275ca26.jpg" alt="">
</div>
<p>
<a href="#" id="hide">Hide the image</a>
<a href="#" id="show" style="display:none;">Show the image</a>
</p>
</div>
</div>

The jQuery

<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    <
    /script> <
    script >
    $(document).ready(function() {
        $('#hide').click(function() {
            event.preventDefault();
            $('.quote').hide();
            $('#hide').hide();
            $('#show').show();

        });
        $('#show').click(function() {
            event.preventDefault();
            $('.quote').show();
            $('#hide').show();
            $('#show').hide();
        })

    }); <
/script>

In this lesson, I tried to keep the code as simple as possible. In case, you still have any question related to jQuery show() or hide() functions; please feel free to ask me in the comments section.

jQuery Hiding Elements Tutorial Home jQuery Toggle Visibility

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply