title: Show/Hide Table Rows using Javascript classes
body: <p>I have a table that kind of expands and collapses, but it's getting too messy to use it and IE and Firefox are not working properly with it.</p>
  
  <p>So, here's the JavaScript code:</p>
  
  <pre><code>  function toggle_it(itemID){ 
        // Toggle visibility between none and '' 
        if ((document.getElementById(itemID).style.display == 'none')) { 
              document.getElementById(itemID).style.display = '' 
              event.preventDefault()
        } else { 
              document.getElementById(itemID).style.display = 'none'; 
              event.preventDefault()
        }    
    } 
  </code></pre>
  
  <p>And a Sample HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Product&lt;/td&gt;
          &lt;td&gt;Price&lt;/td&gt;
          &lt;td&gt;Destination&lt;/td&gt;
          &lt;td&gt;Updated on&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Oranges&lt;/td&gt;
          &lt;td&gt;100&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')"&gt;+ On Store&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr1" style="display:none"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;120&lt;/td&gt;
          &lt;td&gt;City 1&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr2" style="display:none"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;140&lt;/td&gt;
          &lt;td&gt;City 2&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Apples&lt;/td&gt;
          &lt;td&gt;100&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')"&gt;+ On Store&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr3" style="display:none"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;120&lt;/td&gt;
          &lt;td&gt;City 1&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr4" style="display:none"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;140&lt;/td&gt;
          &lt;td&gt;City 2&lt;/td&gt;
          &lt;td&gt;22/10&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The problem is that I use one ID for each and every  and that's very annoying because I want to have a lot of hidden rows for each parent and a lot of parents, so it would be too many IDs to handle. And IE and FireFox are only showing the first Hidden Row and not the others. I suspect this happens because I've made it work by triggering all IDs together.
  I think it would be better if I use Classes instead of IDs to indetify the hidden rows.</p>
  
  <p>I'm really new to all of this so please try and explaining it in any kind of simply way. Also I've tried jQuery but wasn't able to get it.</p>