Hide Or Unhide Element Using Jquery

Sometimes we need to hide/Unhide some part of a webpage from the client side depending on Input.

This can be done using various client side scripting.T oday ,we will do that using Jquerry

<!doctype html>
<html>
<head>
<title>How to hide/show an element using jQuery show/hide effects</title>
</head>
<body>
<input type="button" value="Hide Box" class="button-hide" />
<input type="button" value="Show Box" class="button-show" />
<div id="box">Box</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('.button-show').click(function(){
$("#box").show();
});
$('.button-hide').click(function(){
$("#box").hide();
});
});
</script>
</body>
</html>