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: 1168

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


Show by control type

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

Show by control ID


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

Show by class name


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

Full demo code


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

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

    <button onclick ="showHiddenControl();"/>Show Hidden h2 </button>

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

    <input type="text" class="classname" style="display:none;"/>
    <button onclick ="showhiddenbyclassname();">Show hidden by class name </button><br/>


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



function showHiddenControl() {
        function showhiddenbyid()
        function showhiddenbyclassname()


Leave a Comment:

Click here to register

Popular articles