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.
Comments
Post a Comment