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: 1528
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();
}