22 Votes

jQuery: Show and hide elements

Tutorial by Stefan Trost | Last update on 2021-03-25 | Created on 2018-02-28

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

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 (with a preceding #, we refer to IDs - with a preceding . classes).


If fading is too fast or too slow for us, we can pass a time value to the function as a parameter that indicates how much time the function should take. The default is 400, if it should take twice as long, we can write .show(800).

Hide Elements

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


Again, we can pass the time as a parameter, for example .hide(200).

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().


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.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.