UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Show hidden control - jQuery

Demo and code for how to show hidden control in jQuery

by Athil


Posted on 27 Jun 2018 Category: jQuery Views: 46

Edited on 15 Jul 2019


Here I am going to show how to show hidden control in jQuery.

DEMO

Show by control type

  $("h2").show(); // will show all h2 control

Show by control ID

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

Will show control with it 'txt1' where control id will start with # (hash) in bracket.

Show by class name

$(".classname").show();

Will show control with class name 'classname'. Where class name will start with . (dot) in bracket.

Full demo code

HTML

<!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>
    <br/>


        <script type="text/javascript" src="js/jquery.min.js" >
    </script>
    

</html>

JQuery

function showHiddenControl() {
            $("h2").show();
        }
        function showhiddenbyid()
        {
            $("#txt1").show();
        }
        
        function showhiddenbyclassname()
        {
            $(".classname").show();
        }

 



Leave a Comment:


Advertisement