UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Show hidden controls in javascript

Demo and code for how to show hidden controls in javascript

by Athil


Posted on 22 Jun 2019 Category: Javascript Views: 54

Edited on 28 Jun 2019


Here I am going to show how to show hidden control in HTML control using javascript.

DEMO

Show hidden control

document.getElementById('txt1').style = "display:block";

Where txt1 is the control to show

Hide Control

 document.getElementById('txt1').style = "display:none";

Where txt1 is the control id to hide.

FULL demo Code

?<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Demo for hide/Show  in javascript </h1>

    <input type="text" id="txt1"/> <br/>
    <button type="submit" onclick="HideControl();">Hide </button>
    <button type="submit" onclick="ShowControl();">Show </button>
</body>

    <script>
        function HideControl()
        {
            document.getElementById('txt1').style = "display:none";
        }
        function ShowControl()
        {
            document.getElementById('txt1').style = "display:block";
        }
        </script>


     <br/>

    

		</html>

 



Leave a Comment: