Having trouble with jQuery toggle row to work right

Question

The results appear in a table and each row when clicked on shows detailed information.  I'm trying to use the jQuery toggle so it can open the detail information under the persons name.
The jQuery code I have is this...
<script>
$(document).ready(function() {
     $("#title").click(function() {
     $("#detail").toggle();
</script>
Then my cfoutput table is this...
<table>
<thead>
<tr><th>First Name</th></tr>
</thead>
<tbody>
<cfoutput query="getRecords">
<tr>
<td id="title">#getRecords.firstN#</td>
</tr>
<tr>
<td id="detail"><cfdiv bind="url:details.cfm?firstN=#firstN#" /></td>
</tr>
</cfoutput>
</tbody>
</table>
Now what happens with that is all the detail records show up with the name and only the first row can toggle.  Everything else doesn't do anything.  Also is there a way to have the toggle show as closed first?  Thank you so much for any help with this.

Answer 1

This is because you are referencing an ID with jQuery. An ID has to be unique, only one can exist, and after you create multiple cells with the same ID, jQuery just takes the first one.
You will be better off using a class instead. So you can change you jQuery to look like this:
$(document).ready(function() {
     $(".title").click(function() {
          $(this).parent().next().find('td').toggle();
This will get the current clicked cells parent row, then go to the next row and look for the cell, then it will toggle.
You then need to change your HTML to be something like this:
<cfoutput query="getRecords">
    <tr>
        <td class="title">#getRecords.firstN#</td>
    </tr>
    <tr>
        <td class="detail"><cfdiv bind="url:details.cfm?firstN=#firstN#" /></td>
    </tr>
</cfoutput>
If you want to hide the detail cell first you can add some CSS to the detail class like so:
.detail {
     display:none;
Here is an example of it all - JSFiddle