Show text by button click using jQuery


 

Show text by button click using jQuery

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.

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

Ads