Make logon screen visible/invisible javascript

Question

I'm trying to make my logon screen appear and dissappear when a certain button is being pressed but my code doesn't seem to work and always gives a problem

document.getElementById('logon').style.visibility='hidden';
        function showlogon(){
            document.getElementById('logon').style.visibility="visible";
        }

this is my javascript code it must be standard be hidden

<div id="logon">
                    <form name="login" method="post">
                        Username:<input name="username" type="text" size="14"/><br>
                        Password:<input name="password" type="password" size="14"/><br>
                        <input type="submit" value="Login"/>
                    </form>
                </div>

this is the form that must be hidden by default

Answer 1

This works for me:

                <div id="logon" style="display: none;">
                <form name="login" method="post">
                    Username:<input name="username" type="text" size="14"/><br>
                    Password:<input name="password" type="password" size="14"/><br>
                    <input type="submit" value="Login"/>
                </form>
            </div>
            <div id="button"><button onClick="show()">Show Screen</button></div>
            <script>
            function show() {
                document.getElementById('logon').style.display = 'block'; // Show the #logon div
                document.getElementById('button').innerHTML = '<button onClick="hide()">Hide Screen</button>';
            }

            function hide() {
                document.getElementById('logon').style.display = 'none'; // Hide the #logon div
                document.getElementById('button').innerHTML = '<button onClick="show()">Show Screen</button>';
            }
            </script>