Show text by button click using jQuery

Home Tutorial Jquery Show text by button click using jQuery

Show text by button click using jQuery
Posted on: July 27, 2010 at 12:00 AM

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

Related Tags for Show text by button click using jQuery:

«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