Simple Hide and Show of Paragraph Tag Using jQuery

First of all I will describe hide and show methods and then will create the demonstration page.

Introduction

The .hide() and .show() methods, without any parameters can be like smart shorthand methods for .css('display', 'string'), where 'string' is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown without animation.

The .hide() method sets the inline style attribute of the matched set of elements to display: none. Even smart part here is that it remembers the value of the display property typically blocks or inline before it was changed to none.

And the .show() method restores display properties of the matched set of elements to whatever they initially were before "display: none" was applied.

Setup the Demonstration Page

Let's create the demonstration page; find the code below. Using jQuery I will hide the second <p>.

In the above image you can see, there are two <p> tags. I will hide and show the second paragraph in this demonstration. I am also using two <a> tags, first one to show the <p> and the second one to hide the <p> and <a> tags has show and hide class respectively and this will be used to identify which one is being clicked.

Now, if you are done with body markups, go ahead and setup the jQuery library and methods. Look at the following image:

In the above image you can see a jQuery line:

$('p').eq(1).hide();

Remember: in DOM, each tag has its index value that is assigned automatically ranging from top to bottom and it starts from 0. So the second <p> tag has index 1.

That's why, using the above code I am calling the second <p> tag to hide it.

$('a.hide').hide();

Using the above code, I'm just calling the <a> tag which has the class separator "hide", and making it hidden.

So, that's all about the code. Now, look at the animated example.