jQuery: Show and hide elements

In this tutorial, I'd like to show you how to make a visible HTML element disappear or how to make an invisible element visible again with the help of JavaScript and jQuery.

In addition, at the end of this tutorial, we look at how you can easily switch back and forth between the visibility and the invisibility of an element using the toggle function.

• Show Elements
• Hide Elements
• Toggle - Show and hide Element alternately
• Influence the Duration of the Fading

Show Elements

As a starting point, we have the following invisible DIV container.

<div id="d" style="display:none">Invisible</div>

We would like to display this box now. For making an HTML element visible, jQuery is providing the function .show(), which we now just call with the ID of the DIV box.

$("#d").show();

With a preceding # we can refer to elements via their IDs, with a preceding point . we can address several elements using their class names.

Hide Elements

Similar to the .show() function, jQuery provides the .hide() function for hiding elements.

$("#d").hide();

Otherwise this function works in the same way like .show().

Toggle - Show and hide Element alternately

Sometimes we have the situation that we want to make an element visible or invisible alternately, depending on what state the element is currently in. But we do not need to write an elaborate function with .show() and .hide() because jQuery gives us the function .toggle().

$("#d").toggle();

With .toggle(), the DIV box with the ID "d" will be shown here if it is currently invisible or hidden if it is currently visible.

Influence the Duration of the Fading

If the fading of the elements is too fast or too slow for us, we can pass a time value in milliseconds to the functions .show(), .hide() and .toggle() as a parameter that indicates how much time the function should take.

The default is 400 ms. If it should take twice as long, we can write .show(800), for example. In addition to any numerical value, we can also pass one of the strings "slow" or "fast" to the function that stand for 600 or 200 ms.