Simple Hide and Show of Paragraph tag using jQuery


First of all I will talk on hide and show methods and then will setup the demonstration page.

Introduction


.hide() and .show() methods, without any parameters can be as 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.
.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 .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 setup the demonstration page, find the code below. Using jQuery I will hide the second <p>.


In above image you can see, there is 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 second one to hide the <p>. <a> tags has show and hide class respectively and this will be used to identify which one is being clicked.

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


In 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, 2nd <p> tag has index 1.

That's why, using above code I am calling 2nd <p> tag to get hide.
$('a.hide').hide();

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

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

Comments

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System