Toggle hide/show by clicking same button

Home Tutorial Jquery Toggle hide/show by clicking same button

Toggle hide/show by clicking same button
Posted on: July 28, 2010 at 12:00 AM

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

Related Tags for Toggle hide/show by clicking same button:

«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