Javascript animation is not runing
<p>I'm trying to create an animated menu that slides up and down. Unfortunately it's not working. I've checked the error console and there are no syntax errors. Here's my Javascript:</p>

<pre><code>function showLayer() {
    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.bottom);
    if (layerPosition &gt; 700) {
        hiddenLayer.style.bottom = (layerPosition + 5) + "px";
        setTimeout("showLayer()", 20);
    }
}

function hideLayer() {
    var hiddenLayer = document.getElementByID("mainmenu");
    hiddenLayer.style.bottom = "700px";
}
</code></pre>

<p>Here's the whole context:</p>

<pre><code>&lt;script type="text/javascript"&gt;
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition &gt; 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px; 
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-    
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;     
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255, 
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
&lt;/style&gt;

&lt;div id="mainbutton"&gt;&lt;/div&gt;
&lt;div id="mainmenu" onClick="showLayer('mainmenu')"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="mainbuttontext"&gt;F&lt;/div&gt;
&lt;/body&gt;
</code></pre>
