UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Hide control - jQuery

Demo and code for how to hide an HTML control in jQuery

by Athil


Posted on 22 Jun 2019 Category: jQuery Views: 90

Edited on 28 Jun 2019


Here I am going to show how to hide an HTML control in using jQuery,

DEMO

Hide by control, will hide all h2 controls in form.

$("h2").hide();

Hide by control id, will hide control having "txt1". For hide by control id, we need to use # before control in  double quotes.

  $("#txt1").hide();

Hide by class name, Will hide all controls having the class name "classname", We need to use . (dot) before class name in double quotes.

 $(".classname").hide();

 

Full Demo code

?<!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/> <br/>
      <input type="text" id="txt1"/>
    <button onclick="hidebyId();">Hide by Id </button> <br/><br/>

    <input type="text" class="classname" /> 
    <button onclick="hidebyclass();">Hide by Class </button><br/><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