jQuery: hide and show DOM elements

Tweet

I've recently talked with a friend of mine about jQuery. I soon realised that some common methods are not so easy to understand, especially for beginners.
That's why I decided to write this short post. We are going to see how to hide and show a DOM element. Not very complicated, but that's what beginners usually start to do the first time they use jQuery. Understanding the following tricks, will simplify the whole understanding of jQuery.
Follow me...

Hide an element
Each DOM element in a web page can be manipulated by jQuery. Here we are going to hide the chosen element.
Let's say we have a div with id="element":

<div id="element">We are going to play with this element</div>

Now let's hide the above element:

<script>
$('#element').hide();
</script>

Simple as that.
If we want to completely remove the element we use:

<script>
$('#element').remove();
</script>

The two methods differ in a deep way: the first is just hiding the element, the second will actually remove the element. In the first case, we can always re-use the element while in the second case we can't.
As a side note: the hide method will just make the element disappear. If we prefer, we can always make the element gradually fadeout. To do so we can use the fadeOut() method.

Show a hidden element
After hiding an element, we can always make it reappear. I'm sure you already guessed how...

<script>
$('#element').show();
</script>

Similarly to what I said above, we can always make the element reappear gradually using the fadeIn() method.

Taking the first steps inside jQuery is not that complicated. I suppose that sometimes people are afraid of starting to use a new web tool, just because they think it's difficult or too much complicated.
jQuery is not difficult nor complicated. Starting from the basic can be a good way of understanding something that will really simplify our work a lot.
If you're interested in jQuery, please have a look at my other articles...