title: How to toggle hide/show of all elements with same class name on button click
body: <p>I'm trying to toggle hide/show on all divs with the same class. I have a few tables on my page with multiple strings in each row. I only show the first string and have the rest of the strings in a div that's hidden with style='display:none;'.</p>
  
  <p>I just cannot get this to work. Any suggestions?</p>
  
  <p>example of html:</p>
  
  <pre><code>&lt;a href=# onClick='toggleHist(\"".$zone."\");return false;'&gt;Additional Info&lt;/a&gt;
  
      &lt;table&gt;
      &lt;tr&gt;
      &lt;td&gt;asdfasdf   &lt;div class='zone_1' style='display:none;'&gt;asdfasdf asdfasdf asdfasdf &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
       asdfasdf&lt;div class='zone_1' style='display:none;'&gt; asdfasdf asdfasdf asfasdf &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
       adfasdf&lt;div class='zone_1' style='display:none;'&gt; asdfasdf asdfasdf asdfasdf &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>My javascript:</p>
  
  <pre><code>function toggleHist(zone_name){
      //alert(zone_name);
      $('.'+zone_name).toggle();
  
  }
  </code></pre>
  
  <p>Using .show(); and .hide(); both work, but toggle won't. What am I doing wrong?</p>