Hide and show paragraph text on click event using jquery.

Here is a small jquery code to understandhow click event work and how to show or hide text within such event.

Here is jquery code written in a file say myjquery.js

 

1. First scenario is where all the p tag is hidden during loading. And on clicking on the h1 tag all p tag element are shown.

$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$("p").show();
});
});

2. In the second scenario all the p tag element are visible (by default) and on clicking on h1 tag all the p tag element are hidden.

$(document).ready(function() {
$("h1").click(function() {
$("p").hide();
});
});

3. In the third scenario all the p tag element are hidden initially and p tag element visibility toggle on each click on h1 tag.

$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$("p").toggle();
});
});

4. In the fourth scenario all the above action is repeated but in a slow motion (1000 milisecond)

Show..

$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$("p").show(1000);
});
});

Hide..

$(document).ready(function() {
$("h1").click(function() {
$("p").hide(1000);
});
});

Toggle...

$(document).ready(function() {
$("h1").click(function() {
$("p").hide(1000);
});
});

A sample html demo only for toggle for your testing.

This is a simple jquery example

Now this is how I am displayed
Is my appearance look exciting to you?
I don't care what you feel about me.