title: Why is my hide/unhide button only working on the second click?
body: <p>I just read <a href="https://stackoverflow.com/questions/25255486/toggle-display-only-working-on-second-click">this question</a>, but the answers don't seem to help me. Also, I would think that this code would initially have the tables hidden but that's also not working. This is for a chrome extension so cross browser functionality is unnecessary. Pure javascript answers only, please.</p>
  
  <pre><code>    var observer = new MutationObserver(function(mutations) {  
  
          tables = main_pm_node.getElementsByClassName('featureOptions');
          //alert("outside - number of tables found: " + tables.length);
  
          if(tables.length &gt; 0){
              observer.disconnect();
              console.log("number of tables found: " + tables.length);
              for(i=0; i&lt;tables.length; i++){
                  (function(i) {
                      var sp = document.createElement('span');
                      var act_table = document.createElement('table');
                      act_table.id = 'act-tests-' + i;
                      act_table.style = 'display:none';//'visibility: visible';
                      act_table.innerHTML ='&lt;tbody&gt;blah blah html html&lt;/tbody&gt;';
                      sp.appendChild(act_table);
  
                      tables[i].parentElement.appendChild(sp);
                      var row   = tables[i].insertRow(-1);
                      var cell = row.insertCell(0);
                      var cell1 = row.insertCell(1);
                      cell1.className = "optionLabel pull-left";
  
                      var button = document.createElement('button');
                      button.innerHTML = 'Show ACT tests';
                      button.className = 'btn pull-left';
                      button.type = 'button';
                      button.onclick = function(){
                          var lTable = document.getElementById(act_table.id);
                          console.log(act_table.id + ' ' + lTable);
                          lTable.style.display = (lTable.style.display == 'block') ? 'none' : 'block';
                      };
  
                      cell1.appendChild(button); //.innerHTML = '&lt;input class="btn pull-left" type="button" onclick="toggleTable();" value="Show ACT tests"/&gt;' ;
                  })(i);
              }
          }
      });
  </code></pre>