how to prevent all table rows from toggleing at the same time
<p>I'm trying to create a table that displays detailed (hidden) information beneath certain rows. When said row is clicked the table rows should show below the clicked row.</p>

<p>currently I have the shown rows in a class and the hidden rows in a class.</p>

<pre><code>$("#report tr.odd").click(function(){
    $(this).next("tr.hist").toggle();
});
</code></pre>

<p>When the odd row is clicked the hist rows should pop out underneath it. However, only the first row shows up. I'm not sure how to get it to work with multiple hidden rows.</p>

<p>Here is a portion of my HTML:</p>

<p>`
        
            Select
                Cable #
                Source
                Destination
                Modified
                Location
        </p>

<pre><code>    &lt;tr class="odd"&gt;
            &lt;td align="center"&gt;&lt;input name="selectThis[]" type="checkbox" value="7435" id="selectThis[]"/&gt;&lt;/td&gt;
            &lt;td align="center" &gt;bE4&amp;nbsp;&lt;/td&gt;
            &lt;td align="left"&gt;5B04&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;JOHN'S PC / RM. 58&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr class="odd"&gt;                
            &lt;td align="center"&gt;&lt;input name="selectThis[]" type="checkbox" value="7436" id="selectThis[]"/&gt;&lt;/td&gt;
            &lt;td align="center" &gt;bE5&amp;nbsp;&lt;/td&gt;
            &lt;td align="left"&gt;5B05&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;BRAD'S PC / RM. 58&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class="odd"&gt;                
            &lt;td align="center"&gt;&lt;input name="selectThis[]" type="checkbox" value="7437" id="selectThis[]"/&gt;&lt;/td&gt;
            &lt;td align="center" &gt;bE6&amp;nbsp;&lt;/td&gt;
            &lt;td align="left"&gt;5B06&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;JAMES' PC / RM. 58&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='odd'&gt;                
            &lt;td align="center"&gt;&lt;input name="selectThis[]" type="checkbox" value="7438" id="selectThis[]"/&gt;&lt;/td&gt;
            &lt;td align="left" &gt;&amp;nbsp;&lt;span style='cursor:pointer'&gt;&lt;left&gt;&lt;img src='images/arrow.png'&gt;&lt;/left&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;bE7&amp;nbsp;&lt;/td&gt;
            &lt;td align="left"&gt;5B07&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;JR'S PC / RM. 58&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='hist'&gt;
            &lt;td&gt;video&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='hist'&gt;
            &lt;td&gt;video&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='hist'&gt;
            &lt;td&gt;video&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='hist'&gt;
            &lt;td&gt;audio&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class='odd'&gt;
            &lt;td align="center"&gt;&lt;input name="selectThis[]" type="checkbox" value="1663" id="selectThis[]"/&gt;&lt;/td&gt;
            &lt;td align="left" &gt;&amp;nbsp;&lt;span style='cursor:pointer'&gt;&lt;left&gt;&lt;img src='images/arrow.png'&gt;&lt;/left&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;V7&amp;nbsp;&lt;/td&gt;
            &lt;td align="left"&gt;Bob Dylan&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;Highway 61 Revisited&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;12/05/2011&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;

     &lt;tr class='hist'&gt;
            &lt;td&gt;video&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class='hist'&gt;
            &lt;td&gt;video&lt;/td&gt;
            &lt;td&gt;Bob Dylan&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr class='hist'&gt;
          &lt;td&gt;video&lt;/td&gt;
          &lt;td&gt;Bob Dylan&lt;/td&gt;
      &lt;/tr&gt;

 &lt;/body&gt;
</code></pre>

<p><strong>MORE INFO</strong></p>

<p>How could I modify this:</p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;  
    $(document).ready(function(){
        $("#report tr:not(.odd)").hide();
        $("#report tr.odd").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr.hist").toggle();
        });
    });
&lt;/script&gt;    
</code></pre>

<p>So I get the all of the HIST rows below it to show up and not just the first one?      </p>
