Toggle hide/show by clicking same button


 

Toggle hide/show by clicking same button

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

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

Ads