title: Display hidden list with JavaScript
body: <p>I want to show/hide the items from a list when the input is clicked. The page needs to start with the list not being displayed, but the code only works if it starts with the list being displayed.</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 fAbreGuias() {
    var vGuias = document.getElementById('guias');
    if (vGuias.style.display == "block") { // if vGuias hidden, display it 
      vGuias.style.display = "none";
    } else { // if vGuias displayed, hidden it
      vGuias.style.display = "block";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul#guias li {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="menu"&gt;
    &lt;input type="image" src="_imagens/menuesboco.png" onclick="fAbreGuias()" /&gt;
    &lt;ul id="guias"&gt;
      &lt;li&gt;Guia 1&lt;/li&gt;
      &lt;li&gt;Guia 2&lt;/li&gt;
      &lt;li&gt;Guia 3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>