UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Hide html controls in javascript

Demo and code for how to hide html control using javascript

by Athil


Posted on 22 Jun 2019 Category: Javascript Views: 101

Edited on 22 Jun 2019


Here I am going to show how to hide an HTML control using javascript.

DEMO

Hide Control

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

Where txt1 is the control id to hide.

Show hidden control

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

Where txt1 is the control to show

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:


Advertisement