UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery Hide a control

Demo and Code for how to hide a control using jQuery

by Athil


Posted on 07 May 2017 Category: jQuery Views: 1610

Edited on 10 Nov 2017


DEMO

Here I am going to show how to hide a control in jQuery.

Hide by control Type 

$("h1").hide();

Hide By Control Id

$("#control-id").hide();

Hide by class name 

 $(".class-name").hide();

Full Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1> Demo For hiding control jQuery </h1>

    <h2> Heading1 </h2>
    <h2>Heading 2</h2>

  
    <button onclick="hidebycontrol();">Hide headings </button> <br/>
      <input type="text" id="txt1"/>
    <button onclick="hidebyId();">Hide by Id </button> <br/>

    <input type="text" class="classname" /> 
    <button onclick="hidebyclass();">Hide by Class </button><br/>


</body>
       <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script>
      function  hidebycontrol()
        {
            $("h2").hide();
      }
      function hidebyId()
      {
          $("#txt1").hide();
      }
      function hidebyclass()
      {
          $(".classname").hide();
      }

        </script>
</html>

 



Leave a Comment:


Advertisement