title: Show/Hide element by ID
body: <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 showhide(id) {
    obj = document.getElementById(id);
  
    if (obj.style.display == 'none' || obj.style.display == null)
      obj.style.display = 'block';
    else
      obj.style.display = 'none';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#stuff {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" onclick="showhide('stuff'); return false;"&gt;Click Me&lt;/a&gt;
  
  &lt;div id="stuff"&gt;
    secret stuff
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This kinda works but require two clicks. It seems that it can’t detect that the state is <code>null</code>.</p>
  
  <p>Apparently if I change the condition to this it works:</p>
  
  <pre><code>if (obj.style.display == 'block')
          obj.style.display  = 'none';
  else
          obj.style.display  = 'block';
  </code></pre>
  
  <p>My question now is, what is wrong with the first condition?</p>