jQuery Series 4

Assalamualaykum Wr Br..Welcome to the jQuery Series 4
Lets code the html as shown below:
series4
Now its associated jQuery code can be written as:
series4_js
Let us traverse the code, line 2 depicts the selector “h1” when clicked calls a function which in turn have a selector “h2” which gets hided as per the action defined. The parameter inside the hide method is the milli seconds which allows to hide the selector with such speed or you can consider the parameter as the speed of the event. The following images shows the output as:
output_4
output_4_!
The heading3 is going to take place of heading 2 after clicking the heading 1 i.e., “Click Here”.
Lets explore jQuery beauty a bit deep…The above requirement was that the html page consists of 3 headings and clicking Heading 1 hides heading 2…Right??
Now lets reverse our requirement as on html page there should be 2 headings and clicking heading 1 should show heading 2 and at the ed the page should have 3 headings..
To implement this there is no need to change our html code but jQuery as shown below:
output_4_2
Check it out its output its very interesting….That’s all for the day…Hope enjoyed…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s