Having trouble with jQuery toggle row to work right

[catherine26]

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.

[haxtbh]

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

[catherine26]

Okay I tried your answer and it seems to work better than what I have so thank you but the toggle isn't working.  If I add the CSS to class .detail nothing happens when I click on the link.  Without the CSS the cfdiv shows and then the link closes it but can't reopen.  Hope this makes sense.  I'm thinking it has something to do with the cfdiv but not sure if there is another way to display that information.  The information is coming from another page.

[haxtbh]

Could you not use a <cfinclude> to replace your cfdiv?

[catherine26]

Sorry it took me so long to reply.  Yes I did try to use <cfinclude> and I got an error so didn't think that was the right way of going about it.