Highlighted

Having trouble with jQuery toggle row to work right

Explorer ,
Mar 04, 2015

Copy link to clipboard

Copied

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.

Views

1.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Having trouble with jQuery toggle row to work right

Explorer ,
Mar 04, 2015

Copy link to clipboard

Copied

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.

Views

1.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 04, 2015 0
Advocate ,
Mar 04, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2015 0
Explorer ,
Mar 04, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2015 0
Advocate ,
Mar 05, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 05, 2015 0
Explorer ,
Apr 01, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 01, 2015 0