Continuation
In addition to my previous post, I will add here examples if using jQuery’s built in hide and show methods.
The HTML codes and CSS is still the same, however, it will differ on how we show / hide it.
function show456()
{
$("#label4").show();
$("#label5").show();
$("#label6").show();
}
The .show() method will show the labels, even if it has the hidden class because the .show() method adds an inline style display: block; or display: inline; to make it visible. Inline style will override the hidden class because it has more priority than applied class.
function hide456()
{
$("#label4").hide();
$("#label5").hide();
$("#label6").hide();
}
The .hide() method in the other hand, applies an inline style display: none; which on our previous HTML markup, it was already hidden by the .hidden class.
Comparison
The addClass() and removeClass() method
In my example of the addClass() and removeClass() method of jQuery, it perfectly hide and show the element. Period. No more extra features.
The logic is just too simple, to hide the element, add the hidden class and to show it, remove the hidden class.
The show() and hide() method
To make an element visible from its hidden state (assuming it is already hidden) it adds an inline style display: block or inline depending upon the current display style of the element.
Therefore, it has some extra processing determining whether the element is an inline element or block. Interesting spot isn’t it?
But, there is a very good reason for you to use .show() and .hide() method on your future applications.
Animation! Yes, animation!
You can pass parameter on .show(‘slow’) to animate it. As the name implies, it shows the element slowly.