JQuery hide():
It demonstrates a simple jQuery hide() method. Anything written in body under paragraph section will disappear as soon as we click on it. Simply copy the below text in your editor and see the result:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click on me, I will disappear forever.</p>
<p>Click me too!</p>
</body>
</html>
JQuery hide() and show():
It is just similar to the hide() function which mentioned above rather it will appear on its same place when we click on show() function. For test it simply copy below text in your notepad and see output:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
It demonstrates a simple jQuery hide() method. Anything written in body under paragraph section will disappear as soon as we click on it. Simply copy the below text in your editor and see the result:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click on me, I will disappear forever.</p>
<p>Click me too!</p>
</body>
</html>
JQuery hide() and show():
It is just similar to the hide() function which mentioned above rather it will appear on its same place when we click on show() function. For test it simply copy below text in your notepad and see output:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
No comments:
Post a Comment