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
