Toggle visibility of elements using jQuery


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

Introduction

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

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

With no parameter, the .toggle() function toggles the visibility state of the element on the web page.

$('element').toggle();

The selected element will be hidden or revealed immediately without any animation or effect. It is like setting the display property of CSS to none or block. You don’t see any animation in this case. You see the final results. With toggle, there is no pre-set display condition. If the element being selected is hidden, it will be displayed, and if it is visible, it will disappear. The display property is saved in the cache of jQuery’s data and restored when required.

The display value of an element that is hidden is restored when toggle. For example, If an element has a display value of inline value before it was hidden, and shown, the display value will be set as inline (same as before it was hidden) by jQuery.

When you provide duration, .toggle() will display an animation effect. The .toggle() function animates the width, height, and opacity of the selected elements. After the completion of the animation, the display property is set to none.

Duration is given in string (slow, fast, and normal) or milliseconds. The strings slow, fast, and normal are equivalent to numerical values of 200, 400, and 600 milliseconds, respectively.

From jQuery 1.4.3 a new parameter – easing function was introduced. Easing functions indicate the speed at which the animation progresses at various points throughout the animation. The default easing function is called swing. This will progress animation slightly slower at the start and move marginally faster at the middle and then slows down at the end of the animation.

When the animation is completed, the callback function is called if provided. This is used when you have to use more than one animations together in a sequence.

Example of Toggle visibility of elements in jQuery

In the previous examples, we have used the .show() and .hide() functions separately to show/hide elements on the web page. In this example, we will use toggle() function to switch the display status of the element, which will reduce the number of lines of code significantly.

jQuery Show
jQuery Hide

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/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').toggle();
                $('#show').toggle();

            });

The above code has show/hide effect with an image but no animation so far. To animate it use:

$('.quote' ).toggle('slow');
$('#show').toggle('slow');

With pretty much one line of code enables you to hide or show any element on the web page. If you have any question regarding the show(), hide(), or toggle() functions, feel free to ask in the comments section below.

jQuery Showing Elements Tutorial Home jQuery FadeIn Elements

 

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