Share on Google+Share on Google+

Hide text by clicking button

Advertisement
In this tutorial, we will discuss about hide/show text by clicking on button.

Hide text by clicking button

In this tutorial, we will discuss about hide/show text by clicking on button. In the below example, there are two buttons : hide and show .The "hide " button is used to hide text and "show button " is used to show text. These actions are fired when "click" event on button is generated.

jqHIdeShowText . html

<!DOCTYPE html>
<html>
<head>
<style>
span { background:#D8BFD8; padding:3px; float:left; }
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
<button id="hidb">Hide</button>
<button id="showb">Show</button>
<div>
<span>jQuery</span> <span>is</span> <span>easy</span>
<span>to</span> <span>use</span> <span>and</span>
<span>gives</span> <span>dynamic output..</span>
</div>
<script>
$("#hidb").click(function () {
$("span:last-child").hide("fast", function () {
// use callee so don't have to name the function
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showb").click(function () {
$("span").show(2000);
});
</script>
</body>
</html>

Description of the Program:

The text is written inside "span" tag ; using below code ,the text hides starting from last word of the text line :

$("#hidb").click(function () {
$("span:last-child").hide("fast", function () {
$(this).prev().hide("fast", arguments.callee);
});
});

Given below code is used to show text line written inside "span" tag :

$("#showb").click(function () {
$("span").show(2000);
});

The '2000' inside ".show(2000)" method is used to determining how long the animation will run

OUTPUT

Before clicking any button :

After click "Hide" button :

After clicking "show" 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.