Hide/show menu onclick javascript
<p>I want to do a hide/show menu that shows when you click the <code>p</code>-tag with id <code>menu</code> and hides when you click the same <code>p</code>-tag — but apparently I'm useless on JavaScript. I don't want to use jQuery, I really want to learn this! Someone out there? </p>

<p>Here is my HTML:</p>

<pre><code>&lt;nav&gt;
    &lt;p id="menu"&gt; Menu&lt;/p&gt;
        &lt;ul id="menu-box"&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Start&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="animal.html"&gt;Animal&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="pictures.html"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;  
</code></pre>

<p>Here is my JavaScript (so far):</p>

<pre><code>function setUp() {
    document.getElementById("menu").onclick = setMenu;
}

function setMenu() {
    var menuBox = document.getElementById("menu-box");
    menuBox.className = "menuBox";   
}

setUp();
</code></pre>