Hide/Show paragraph by button click

Home Tutorial Jquery Hide/Show paragraph by button click

Hide/Show paragraph by button click
Posted on: July 27, 2010 at 12:00 AM

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

Related Tags for Hide/Show paragraph by button click :

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics