Tuesday, April 8, 2014

Hide/Show values in Jquery

We can easily easily hide values using jQuery.In this artcile am going to explain how to hide values using jQuery.Let's take a look.


JQuery Function

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script type="text/javascript">
    $(document).ready(function(){ //$ is commonly used variable for jQuery
        $(".hide").click(function() {//.hide is the button class
            $(".test").hide();//Using Class to hide.You can replace with your class or ID and test this.
        });
      
        $(".show").click(function() { //.show is the button class
            $("p").show();//Using p tag to show,You can change this as div,class,Id and span
        });
       
    });
</script>

HTML Codes

  <p>Hi.This is my first Jquery</p>
    <p id="test" style="color:#FF3333">Hi.This is my first Jquery</p>
    <p class="test" style="color:#990033">Hi.This is my first Jquery</p>
    <button class="hide">Hide</button>
    <button class="show">Show</button>
Please share your comments and feedback.Thanks.

No comments:

Post a Comment