Hide text by clicking button

Home Tutorial Jquery Hide text by clicking button

Hide text by clicking button
Posted on: July 27, 2010 at 12:00 AM

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

Related Tags for Hide text by clicking 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