Hide text by clicking button


 

Hide text by clicking button

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

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

Ads