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