Home Tutorial Jquery Show text by button click using jQuery

 
 

Share on Google+Share on Google+
Show text by button click using jQuery
Posted on: July 27, 2010 at 12:00 AM
Advertisement
In this tutorial, we will discuss about hide/show text by clicking on button.

Show text by button click using jQuery

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.

jqShowText.html

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#showb").click(function () {
$("div:eq(0)").show("fast", function () {
// use callee so don't have to name the function
$(this).next().show("fast", arguments.callee);
});
});
$("#hidb").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body>
<button id="showb">Show</button>
<button id="hidb">Hide</button>
<div>Hello,</div>
<div>What's</div>
<div>Up</div>
<div>Brother</div>
</body>
</html>

OUTPUT

Before Clicking button :

After clicking "show" button :

After Clicking "Hide" button :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Show text by button click using jQuery:


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