Home Tutorial Jquery Hide text by clicking button

 
 

Share on Google+Share on Google+
Hide text by clicking button
Posted on: July 27, 2010 at 12:00 AM
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

Advertisement

Related Tags for Hide text by clicking button:


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.

Posted on: July 27, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com