Share on Google+Share on Google+

Hide/Show paragraph by button click

Ads
In this tutorial, we will discuss about how to hide/show paragraph by clicking on button using jQuery.

Hide/Show paragraph by button click

In this tutorial, we will discuss about how to hide/show paragraph by clicking on button using jQuery. In the below example, button click event generate action of hiding paragraph and it also displays another button "click to show paragraph " .when we click on it , it will display paragraph ,which was hided previously.

jqHideParaOnClick.html

<!DOCTYPE html>
<html>
<head>
<style>
p { background:#DAA520; font-weight:bold;}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
<button id="butt1">Click to hide Paragraph</button>
<button id="butt2">Click to show Paragraph</button>
<p>This will Hide after clicking button</p>
<p>It will hide too....................</p>
<script>
$("#butt2").hide();
$("#butt1").click(function () {
$("p").hide("slow");
$("#butt1").hide("slow");
$("#butt2").show("slow");
});
$("#butt2").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>

OUTPUT

Before clicking any button :

After clicking button :

After clicking above button :

Download Source code

Click here to see demo

Advertisements

Posted on: July 27, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement