Hide html elements using JQuery code or example

Hide html elements using JQuery code

Some times we required to hide the web page elements on action or page load. In this example i am showing how to hide the HTML element using jquery. 

Main code to perform operation of hiding: 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $('#btnHide').click(function() {
             $('#three').hide();
         });
     });
 </script>



Example: In this we are hiding three on button click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $('#btnHide').click(function() {
             $('#three').hide();
         });
     });
 </script>
</head>
<body>
    <div id="one">
    <b>One</b>
    </div>
    <div id="two">
    <b>two</b>
    </div>
    <div id="three">
    <b>three</b>
    </div>
    <div id="four">
    <b>four</b>
    </div>
    <div id="five">
    <b>five</b>
    </div>
    <input type="button" value="Hide data" id="btnHide" />
</body>
</html>

Output:
on page load.
Hide html elements using JQuery code or example
Hide html elements using JQuery code or example

After clicking on "Hide data" button.
Hide html elements using JQuery code or example
Hide html elements using JQuery code or example output




Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar