title: javascript collapsible table without jquery
body: <p>This is a simple question I can't seem to figure out and every google search returns a million ways to do this via jquery, but I'd prefer to use vanilla javascript because I am new to it and want to learn it well before using any libraries. What I am trying to do is have a button collapse part of a table when clicked and then show those hidden parts again when clicked again. Basically just toggling the display of a class of elements.</p>
  
  <p>I have a button that calls the <code>test()</code> function
  when clicked nothing on my table changes. Here is my javascript code. I am using <code>collapse[0]</code> because if I understand it correctly <code>collapse</code> is a nodeList and I always close and open all of these together so I only need to check the first element.</p>
  
  <pre><code>function test() {
      var collapse = document.getElementsByClassName("catOne");
      var i = 0;//Counter for loops
  
      if(collapse[0].style.display === "table-row"){
          for(i = 0; i &lt; collapse.length; i += 1){
              collapse[i].style.display = "none";
          }
      }
  
      if(collapse[0].style.display === "none"){
          for(i = 0; i &lt; collapse.length; i += 1){
              collapse[i].style.display = "table-row";
          }
      }    
  }
  </code></pre>
  
  <p>I've tested the function with this code:</p>
  
  <pre><code>function test() {
      var collapse = document.getElementsByClassName("catOne");
      var i = 0;//Counter for loops
  
      for (i = 0; i &lt; collapse.length; i += 1) {
          collapse[i].style.display = "none";
      }
  </code></pre>
  
  <p>which works fine on collapsing the elements so evidentally the issue is with my if statement, but my IDE, Netbeans, doesn't throw any errors and as far as I can tell it should be working.</p>
  
  <p>Thanks for the help.</p>
  
  <p>Link to html and javascript: <a href="https://jsfiddle.net/ozjbekjy/" rel="nofollow">https://jsfiddle.net/ozjbekjy/</a></p>