Let us understand it with a suitable example:-
hide.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide.js"></script>
</head>
<body>
<h1>Paragraph Example</h1>
<p id="p1">Click the paragraph to hide</p>
<hr>
<h1>Button Example</h1>
<h5 id="btn1">Click button to hide the paragraph</h5>
<button>Hide</button>
</body> </html>
hide.js:-
$(document).ready(function(){
$("p").click(function(){
$("#p1").hide();
});
});
$(document).ready(function(){
$("button").click(function(){
$("#btn1").hide();
});
});
Screenshot:-
hide.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide.js"></script>
</head>
<body>
<h1>Paragraph Example</h1>
<p id="p1">Click the paragraph to hide</p>
<hr>
<h1>Button Example</h1>
<h5 id="btn1">Click button to hide the paragraph</h5>
<button>Hide</button>
</body> </html>
hide.js:-
$(document).ready(function(){
$("p").click(function(){
$("#p1").hide();
});
});
$(document).ready(function(){
$("button").click(function(){
$("#btn1").hide();
});
});
Screenshot:-
Explanations:-
Jquery is a JavaScript library. We need to include its library to use its functionality in webpage. Here, I have used the "hide()" function to hide the paragraph(<p>) tag. I have shown here, simply by clicking on the paragraph as well as by clicking on the button. I have used separate ids attribute to show the above functionality in Jquery.
No comments:
Post a Comment