title: Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?
body: <p>I want the visitor to be able to expand/collapse some sections, and am using:</p>
  
  <pre><code>&lt;input onclick="return toggleDiv('xx')" 
         type="button" 
         class="button" 
         value="click here to expand/collapse"/&gt;
  </code></pre>
  
  <p>and in the  I have the function:</p>
  
  <pre><code>function toggleDiv(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
      e.style.display="block"
    } else {
      e.style.display="none"
    }
    return true;
  }
  </code></pre>
  
  <p>The first time a button is clicked it doesn't work, subsequent clicks (on any of the buttons) work OK.</p>
  
  <p>There is related conversation here:
   <a href="https://stackoverflow.com/questions/542247/button-needs-to-be-clicked-twice-to-trigger-function">Button needs to be clicked twice to trigger function</a></p>
  
  <p>but I don't understand the answer (too technical;-), 
  could someone help explain it please?</p>