title: Show and Hide Javascript HTML5
body: <p>So, I'm doing my designer-portfolio in html and I wanted to have a menu that only shows when this character is pressed...</p>
  
  <p>But I'm new on programming and my codes are very simple, so I'm using this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.visibility == 'hidden')
        e.style.visibility = 'visible';
    else
        e.style.visibility = 'hidden';
  }
  
  function untoggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.visibility == 'visible')
        e.style.visibility = 'hidden';
    else
        e.style.visibility = 'visible';
  }    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');"&gt;openmenu&lt;/div&gt;
      
  &lt;div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu'); onclick=untoggle_visibility('closemenu');"&gt;closemenu&lt;/div&gt;
      
  &lt;div id="menu" style="visibility: hidden;"&gt;...&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is it only works once... </p>
  
  <p>When I click on <code>#openmenu</code> it shows the <code>#menu</code> and the <code>#closemenu</code>, and when I click on <code>#closemenu</code> it hiddes the <code>#menu</code> and the <code>#closemenu</code>. </p>
  
  <p>BUT it only works once, so if I press <code>#openmenu</code> after <code>#closemenu</code>, it won't work...</p>