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>