UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Show hidden control

Demo and code for how to show a hidden control in jQuery

by Athil


Posted on 09 May 2017 Category: jQuery Views: 1326

Edited on 10 Nov 2017


DEMO

Hi, here I am going to show how to show a hidden control in jQuery.

By using Control type

 $("h1").show();

By Using Control ID

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

By Using class name

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

Full Example

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

    <h2 style="display:none;"> Hi Iam h2</h2>

    <button onclick ="showHiddenControl();"/>Show Hidden h2 </button>
 <br/>
    <input type="text" id="txt1" style="display:none;">
    <button onclick ="showhiddenbyid();">Show hidden by id </button>

    <br/>
    <input type="text" class="classname" style="display:none;"/>
    <button onclick ="showhiddenbyclassname();">Show hidden by class name </button><br/>
</body>
        <script type="text/javascript" src="js/jquery.min.js" >
    </script>
    <script>
        function showHiddenControl() {
            $("h2").show();
        }
   function showhiddenbyid()
        {
            $("#txt1").show();
        }
        
        function showhiddenbyclassname()
        {
            $(".classname").show();
        }
        </script>
</html>

 



Leave a Comment:


Advertisement