Javascript collapsable div not working?
<p>Im trying to toggle the div to make it visible/hidden. Im making a leader board of sorts that i want to open but only when clicked.</p>

<pre><code>&lt;html&gt;
    &lt;title&gt;test&lt;/title&gt;

    &lt;head&gt;
        &lt;script type="text/javascript"&gt;
            &lt;!-- the function --&gt;
            function showleaders() {
                if (document.getElementById('leaderboard').style.visibility = "hidden";) {
                    document.getElementById('leaderboard').style.visibility = "visible";
                } else {
                    document.getElementById('leaderboard').style.visibility = "hidden";
                }
            }
        &lt;/script&gt;
        &lt;style type="text/css"&gt;
            #leaderboard {
                height: 300px;
                width:300px;
                left:0;
                background:red;
                border-radius:20%;
                visibility:hidden;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;a href="javascript:showleaders();"&gt;Leaderboard&lt;/a&gt;
        &lt;div id="leaderboard"&gt;hello&lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>What am i doing wrong?
I just want the div to toggle in between visibilities</p>
