Hide or Unhide Element using Jquerry

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

This can be done using various client Side Scripting.today ,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>