title: JS one-click Toggle (not two clicks) - default value of toggled element
body: <p>Why here we need to <strong>click two times</strong> (<a href="http://jsfiddle.net/xL8hyoye/4/" rel="nofollow">http://jsfiddle.net/xL8hyoye/4/</a>):</p>
  
  <p>html:</p>
  
  <pre><code>&lt;a href="#" onclick="toggle_visibility('foo');"&gt;Click here to toggle visibility of element #foo&lt;/a&gt;
  &lt;div id="foo"&gt;This is foo&lt;/div&gt;
  </code></pre>
  
  <p>css: <code>#foo {display: none;}</code></p>
  
  <p>js:</p>
  
  <pre><code>function toggle_visibility(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'none')
        e.style.display = 'block';
     else
        e.style.display = 'none';
  }
  </code></pre>
  
  <hr>
  
  <p>When here only by <strong>one click</strong> text disappears (<a href="http://jsfiddle.net/xL8hyoye/5/" rel="nofollow">http://jsfiddle.net/xL8hyoye/5/</a>):</p>
  
  <p>html:</p>
  
  <pre><code>&lt;a href="#" onclick="toggle_visibility('foo');"&gt;Click here to toggle visibility of element #foo&lt;/a&gt;
  &lt;div id="foo" style='display:none'&gt;This is foo&lt;/div&gt; &lt;!-- add display style here --&gt;
  </code></pre>
  
  <p>css: <code>&lt;!-- delete ccs here --&gt;</code></p>
  
  <p>js:</p>
  
  <pre><code>function toggle_visibility(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'none')
        e.style.display = 'block';
     else
        e.style.display = 'none';
  }
  </code></pre>