Let us explain with an example:-
hide_show.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide_show.js"></script>
</head>
<body>
<h4>Click on Hide button and then on Show button.</h4>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>
</html>
hide_show.js:-
$(document).ready(function(){
$("#btn1").click(function(){
$("h4").hide(1000);
});
$("#btn2").click(function(){
$("h4").show(1000);
});
});
Screenshot:-
hide_show.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide_show.js"></script>
</head>
<body>
<h4>Click on Hide button and then on Show button.</h4>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>
</html>
hide_show.js:-
$(document).ready(function(){
$("#btn1").click(function(){
$("h4").hide(1000);
});
$("#btn2").click(function(){
$("h4").show(1000);
});
});
Screenshot:-
Explanation:-
Here, in the "hide" function, "1000" as a parameter is passed. So, when we click on the "hide" button, it will hide the content within "1000 ms". Similarly, in the case of "show" function.
No comments:
Post a Comment