Share on Google+Share on Google+

Toggle hide/show by clicking same button

Advertisement
In this tutorial, we will discuss about how to toggle hide/show by clicking button.

Toggle hide/show by clicking same button

In this tutorial, we will discuss about how to toggle hide/show by clicking button. In the given below 2 example, there is button ,by clicking on it, the paragraph will hide/show . In first example , the paragraph will hide slowly and also display slowly. While in second paragraph, the paragraph hide/show is instantly, also effect depends on "flip++ % 2 = = 0" equation if it is true ,then it will hide paragraph and if it is false , then it will show paragraph.

jqToggleAppearance1.html

<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button>Click to Toggle Text</button>

<p>jQuery</p>
<p>Toggle Effect</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>

OUTPUT

After clicking button :

jqToggleAppearance2.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>GOOD DAY</p>
<p style="display: none">GOOD NIGHT</p>
<script>

var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>

OUTPUT

After clicking "Toggle" button :

After again clicking on "Toggle" button :

Download Source Code

Click here to see demo

Click here to see demo

Advertisements

Posted on: July 28, 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.